15 ferramentas úteis para um bom desenvolvimento da Web
Não somos de aderir a estereótipos, mas provavelmente já faz um tempo desde que um (estéreo) típico desenvolvedor web raspou a maldita barba, ou trocou de roupa, ou tomou banho, ou raspou aquela maldita barba…
Você realmente não pode culpá-los. Já faz um tempo desde que todos os desenvolvedores pararam para respirar. 2015 foi um bom ano com saltos e avanços na tecnologia de desenvolvimento web, mas um desenvolvedor não pode mais simplesmente quebrar seu Laptop/MAC (como um chefe) e codificar para uma plataforma em seu lazer.
Agora você tem que cuidar do design responsivo com suporte multi-plataforma, HTML5, PHP7 previsto para ser lançado um pouco mais adiante no ano, navegadores como o IE que não param de bugar tudo … Níveis semelhantes a matrizes da própria Internet das Coisas.
É tudo o que nós, desenvolvedores, podemos fazer para acompanhar. Mas nós o fazemos, principalmente devido a essas ferramentas bacanas.
Dê uma olhada.
1 Edição de Komodo
Tudo nasce do código para um desenvolvedor, então é natural começar com a melhor ferramenta de edição que você pode encontrar. O Komodo Edit é bastante kosher para tudo isso e muito mais. É um ótimo editor de texto multiplataforma e multilíngue para você escrever e editar seu código. Ah, e é grátis.
A ferramenta funciona em Windows, Mac, Linux/UNIX, então não se preocupe. Também gostamos dele por seu recurso de preenchimento automático de código para linguagens como HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (para cerca de 5 pessoas no mundo), etc. Esse é um editor de texto inteligente.
Pontos de bônus para maior conveniência do recurso Project Manager para organizar e manter o controle de arquivos.
2 Criador de CSS 3.0
Vamos ser honestos, apesar de tudo que você ama no CSS3, você não pode deixar de odiá-lo um pouco quando se trata de escrever sintaxe para coisas como bordas arredondadas. É um detalhe tão trivial para perder o sono, mas você faz de qualquer maneira. Você não pode memorizar mais de 100 novas propriedades e seus respectivos prefixos. Então, graças a Deus por uma ferramenta como o CSS 3.0 Maker.
Esta pequena ferramenta online permitirá que você copie e cole códigos complicados em sua folha de estilo. Ele gera código para detalhes de estilo, como raios de caixa, gradientes, texto e sombras de caixa, transformações, transições e rotações de sua escolha. Ele também mostrará quais navegadores de desktop e móveis suportam essas propriedades de estilo. Uma pequena área de visualização mostrará o efeito, o código pode ser copiado da caixa de visualização ou baixado em um arquivo HTML.
Para aqueles de nós que não podem dedicar muito tempo a detalhes de estilo aparentemente banais, esta ferramenta é um salva-vidas.
3 – sem prefixo
“Liberte-se do inferno do prefixo CSS!” – Página de introdução sem prefixo.
Esta é uma ferramenta prática, trazida para nos libertar do ‘prefixo inferno’ por um anjo chamado Lea Verou do Github. Ele adicionará o prefixo do fornecedor (em algum lugar que você não pode ver) às folhas de estilo em
ou elementos. Além disso: você não terá que se preocupar com novos elementos ou, prefixos do jQuery ou quaisquer alterações que fizer, porque cobrirá tudo.O que há para não gostar?
4 libras de bloco
‘Lorem Ipsum’ tem sido o texto de substituição por muito tempo. Felizmente, agora temos Blokk: a fonte para acabar com a ‘dor’ do latim incompreensível.
O Blokk fornece um ‘texto’ de bloco para ser usado como espaço reservado durante a criação de maquetes e wireframes. Também não é preciso dizer que isso não vai confundir os clientes menos familiarizados com a web durante as apresentações.
5 fontes
Antes que as fontes de ícones se tornassem uma coisa, os desenvolvedores precisavam da ajuda de designers para criar ícones escaláveis. O tempo que levou para desenvolvê-los (que, aliás, inclui criar, extrair, implementar e personalizar) beirava o ‘absolutamente ridículo’. Mas então alguém transformou ícones em fontes e todos viveram felizes… em um futuro previsível.
Fontello é um ótimo gerador de fontes de ícones. Ele permitirá que você escolha entre milhares de ícones, personalize seu mapeamento ou edite seus nomes e os compile em um único arquivo de fonte. É incrível e é grátis.
Não podemos agradecer a Vitaly Puzrin o suficiente.
6 testes de tipo
Ative o JavaScript do seu navegador e comece a testar a aparência da fonte escolhida em um site real.
Typetester é descomplicado. Ele permite inserir e comparar diferentes fontes e testar sua aparência. Você também pode brincar com tamanho, rastreamento, cor, etc. até conseguir o que deseja. Você pode comparar até 36 fontes diferentes ao mesmo tempo. Imagine quanto tempo você pode economizar com isso.
É muito legal.
7 marcação suja
A codificação pode ser um pouco cansativa às vezes, mas a limpeza de código existe no Nível: Tédio Total. É necessário, porém, se você quiser evitar erros e carregar mais rápido.
O Dirty Markup ajuda a economizar o tempo que você poderia gastar em atividades mais interessantes (sanduíche de bacon, alguém?). Este vem com recursos combinados de outras ferramentas de limpeza de sintaxe única. Estamos falando de HTML Tidy, CSS Tidy, JS Beautify e Ace Editor. Esse é um limpador abrangente.
É um aplicativo baseado na web para limpar e formatar seu HTML, CSS e JavaScript. Não podemos pedir mais.
8 BugHerd
Você pode se tornar um vigilante matador de insetos com esta ferramenta poderosa.
BugHerd segue o antigo ditado de ‘Mantenha-o curto e simples, estúpido’. Ele pode capturar o feedback do cliente, resolver problemas menores sozinho, rastrear bugs (para você exterminar). Ele também desempenhará o papel de secretário e gerenciará seus projetos.
Uma interface do usuário superfácil de apontar e clicar em seu site permite que seus usuários relatem problemas. O BugHerd os transforma em relatórios com todas as informações que você pode precisar (como a versão do navegador do usuário). É fácil de configurar, divertido de usar e possui recursos como capturas de tela automáticas (extensão do navegador), links diretos, anexos de arquivos, dados completos do seletor e discussões.
Com uma assinatura padrão de $ 29/mês, isso é uma pegadinha.
9 Screenfly
Web design responsivo é mais do que uma nova moda, pois veio para ficar. Mas, por enquanto, você encontrará layouts fluidos complicados na melhor das hipóteses. Você também ficará furioso tentando testar seu layout em vários tamanhos de tela.
Felizmente, Screenfly é um pequeno aplicativo da web que testará suas consultas @media para você. Você insere seu URL e ele mostra como suas consultas lidam com as dimensões do dispositivo em que você está clicando no painel superior.
Isso não leva em consideração a diferença de renderização entre os navegadores, mas você pode usar o Browser Shots para isso. Caso contrário, é uma maneira simples e bem montada de ver a aparência do seu site em diferentes resoluções.
10 Fundação
Já que estamos falando de RWD, podemos começar falando de frameworks para desenvolvê-lo.
O debate na internet sobre qual framework de front-end é melhor: Bootstrap ou Foundation? Você pode usar um ou outro. Mas o Foundation está um pouco mais à frente quando se trata de sistemas de grade, unidades proporcionais para design (embora o Bootstrap 4.0 Alpha tenha mudado para unidades em e rem), suporte da direita para a esquerda, tabelas de preços, passeios e navegação fora da tela .
É óbvio que preferimos Foundation. Ele funciona com SASS e CSS, está repleto de recursos e geralmente é mais conveniente e flexível.
Concordamos com Zurb sobre isso: é ‘muito rápido’.
11 Adobe Edge
Depois de uma década de software que coloca o design antes do código, a Adobe finalmente dá uma vantagem aos programadores.
Esta variedade francamente incrível de ferramentas e serviços é feita tendo em mente as novas tendências de codificação de front-end. Eles nos deram um belo presente. Edge Animate para ajudar os programadores a criar animações enquanto erradica simultaneamente todos os vestígios de Flash. Desculpe, Adobe, o Flash foi ótimo. Mas o Animate usa HTML e JavaScript padrão, e você sabe, tamanho único…
Existe o Edge Code para edição de CSS a partir de um documento HTML. O Inspect consolida o teste de navegador e os testes de compatibilidade de dispositivos para um design responsivo e sincroniza todos eles para uma atualização/personalização super rápida. O imensamente popular Typekit agora faz parte da família Edge. O Reflow ainda está para ser lançado, mas provavelmente irá explodir outros criadores de grades CSS front-end. E ainda tem mais.
Nós sabemos. Também tivemos que arrancar nossas mandíbulas do chão.
12 vagabundos
O Vagrant é muito mais do que um software de desenvolvimento virtual.
Essa beleza permite criar ambientes de trabalho portáteis e facilmente reprodutíveis. Ele consolida o software de virtualização, a caixa básica do servidor e as ferramentas de configuração em um pacote poderoso. Basicamente, você não precisa mais ter o VirtualBox + Ubuntu + Chef. O Vagrant fará o trabalho dos três e ocupará menos espaço ao fazê-lo. Os usuários avançados também lhe dirão como ele permite que você configure facilmente redes multi-VM.
Está escrito em Ruby, mas funcionará para PHP, Java, JavaScript, Python e C#. Você pode trabalhar com o Vagrant no Windows, Mac OSX, Linux e FreeBSD.
É super rápido porque não tem nada do U-friendly que parece bom, mas ocupa o espaço necessário. Ele funciona bem como um ambiente de teste para desenvolvedores.
Isso é o mais próximo do Santo Graal que podemos chegar.
13 Informações do PageSpeed
O PageSpeed Insights do Google faz exatamente o que diz na lata. Ele fornece informações sobre o desempenho do front-end da sua página. Isso vai abrir os olhos de muitos desenvolvedores poderosos por aí. Portanto, divirta-se e comece a calvície acelerada de todos os cabelos que serão puxados.
Tudo o que ele faz é medir o tempo decorrido entre: solicitação e renderização de conteúdo acima da dobra e solicitação e renderização de página inteira.
Ele verificará os aspectos independentes da rede para calcular o desempenho da sua página: configuração do servidor, estrutura HTML, JavaScript, CSS e imagens.
É nítido e impiedosamente rápido; então definitivamente vai ferir seus sentimentos e possivelmente fazer você chorar se você pontuar baixo. Ele também tentará compensar, dando-lhe sugestões pontuais para melhorar seu desempenho, como um pai condescendente.
E nós amamos isso.
14 git
A maioria dos desenvolvedores modernos já está familiarizada com isso. Afinal, é assim que se explica a existência de comunidades como o GitHub.
Git é um controle de revisão de código aberto e um sistema de gerenciamento de código-fonte que acompanha o histórico do seu projeto em um repositório. É basicamente um PA super-rápido e supereficiente.
Ele permite que você experimente livremente sem medo de estragar tudo para sempre. Você também pode criar vários repositórios e usar ramificação/fusão para trabalhar com recursos individuais. É uma ferramenta particularmente útil para esforços colaborativos.
É totalmente distribuído, então você não terá que temer o pesadelo sem rede quando estiver offline (por design ou acidente). Você pode simplesmente adicionar as atualizações em seu repositório principal, que estará esperando por você pacientemente de volta online.
15 Validação de marcação W3C
Este é o rito final de passagem.
A validação de marcação do W3C é bastante direta e necessária. Como diz o W3C, a validação pode: ajudá-lo a depurar, preparar seu site para o futuro (os navegadores são construídos nos padrões do W3C) e ajudar na manutenção.
Ele também ensina como ser compatível com o padrão, mostrando os ‘erros’ de seus caminhos.
A validação de marcação não deve ser considerada repressiva, porque, na verdade, não é. Isso ajudará você a aprender como escrever um código melhor…
Como um profissional.
Conclusão
Existem, é claro, mais ferramentas, plug-ins, complementos e recursos e comunidades em geral que tornam o desenvolvimento… bem, não exatamente mais fácil, mas menos trabalhoso. E mais estão sendo desenvolvidos agora. Existe o complemento Firebug para Firefox que permite monitorar e editar HTML, CSS e JavaScript ao vivo. PixelDropr é um complemento do Photoshop que permite criar botões e ícones adoráveis para o seu site com o mínimo de trabalho.
Todo desenvolvedor profissional eventualmente tem seu próprio ‘kit de ferramentas’ de aplicativos e softwares nos quais eles confiam para trabalhar com mais rapidez e eficiência. Alguns são gratuitos, outros temos que pagar.
Mas então, quem pode colocar um preço na conveniência?