Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

6 Ferramentas Grátis Que Te Ajudam A Programar FrontEnd

Postado por Vinicius Cardoso em 23/10/2014 às 12:08

Background Image

Como programador FrontEnd eu já me deparei com algumas dificuldades na hora de programar sites e aplicações. Na verdade não são bem dificuldades e sim processos trabalhosos que só fazem você gastar um grande tempo em tarefas que parecem ser simples.

Então, para tentar driblar alguns desses processos demorados e chatos, existem algumas ferramentas na internet que podem te ajudar, e muito, na hora que você está desenvolvendo um projeto FrontEnd.

Vamos lá a algumas que usamos aqui na WebingPro e ajudam bastante.

 

25Z5275

Google Fonts

Hoje em dia os sites não se limitam mais as fontes clássicas do padrão web. Isso graças ao @font-face, uma nova regra CSS, que tornou possível usar qualquer fonte em um site, qualquer uma mesmo!! o//

E o Google se aproveitando dessa nova tecnologia criou uma ferramenta que reuni uma biblioteca de fontes. Estas estão disponíveis e já convertidas para o padrão @font-face e você consegue colocar no seu site só inserindo uma linha de código, via CSS, HTML ou Javascript.

Link para o Google Fonts.

 

Cute-Squirrel-Wallpaper

FontSquirrel

É pra ele que você corre quando existe uma fonte, no layout que você está estruturando, e não tem na biblioteca do Google Fonts. =P

Você abriu o arquivo do Photoshop, que o designer lhe enviou, e viu que está usando uma fonte que não tem dentro da biblioteca do Google Fonts? Fica tranquilo, você não vai ter que ter todo trabalho de transformar essa fonte para o padrão @font-face, o FontSquirrel irá fazer isso para você.

Basta pedir o arquivo da fonte para o designer, entrar no FontSquirrel e fazer o upload da fonte. Ele irá gerar todos os arquivos para o formato @font-face. Agora é só você baixar o arquivo .zip que o FontSquirrel irá gerar e assim colocar sua fonte no site. É lindo! *–*

Link para o FontSquirrel.

 

o-COW-facebook

Spritecow

Se você tem um número enorme de ícones e imagens pequenas que fazem parte do layout do seu site, e você sabe o quanto isso pesa nele, então provavelmente você já tentou correr para o CSS Sprite né? (Se não sabe o que é CSS Sprite veja aqui!).

Mas depois que o designer te passou a imagem em Sprite, quando ele é gente boa de fazer o Sprite, é hora de colocar no site cada parte da imagem, mas fazer os cálculos de posicionamentos é um pouco trabalhoso.

Com o Spritecow você envia a imagem em Sprite e ele identifica cada parte da imagem e qual a posição dela em relação a origem. Então você precisará apenas copiar e colar no CSS cada pocisionamento. Isso facilita de mais!

Link para o Spritecow.

 

424730_more_solnce_nebo_1920x1080_(www.GdeFon.ru)

Gradient Editor

Outro susto é quando você vê no layout um elemento com gradiente. Você já pensa em todo tempo que irá perder para deixar igual ao do layout, e os cálculos que terá que fazer para gerar esses gradiente com CSS né?

Mas agora você pode ficar tranquilo. O Gradient Editor está ai justamente para isso. Você faz o gradiente na interface gráfica do site, deixando igual ao do Photoshop, e ele gera o código em CSS. Então você só copia e cola no seu código. Ajuda de mais também!!

Link para o Gradient Editor.

 

Typeface

Fontello

Hoje em dia usar ícones é uma tendência, mas ter imagem de todos os ícones usados em um projeto pode deixar seu site um pouco pesado, mesmo que você use CSS Sprite. Além de que em muitos casos você terá variações para dispositivos(desktop, mobile e tablet) e de cores. O Fontello é uma ferramenta que vem pra ajudar nesse quesito, pois ele gera uma fonte de ícones. 🙂

Isso quer dizer que você vai ter um quantidade enorme de ícones em formato SVG no seu site. Além do SVG ser muito mais leve ele tem a possibilidade de redimensionamento para maior ou menor sem perder a qualidade. Praticamente indispensável nos dias de hoje.

Além das vantagens do SVG teremos todos os controles tipográficos dos ícones, como “color”, “font-size”, “text-shadow” e outros.

Link para o Fontello.

 

Friends-Big and Small Dogs

Avivo Minify

E como nós sabemos ninguém gosta de site pesado certo? Até porque se o site que você desenvolveu ficar pesado você provavelmente será questionado. Uma forma de deixar ele mais rápido é minificando códigos CSS e Javascript. Essa é justamente a função do Avivo Minify.

Você cola nele todo seu arquivo CSS ou Javascript e manda minificar, depois cola o resultado no arquivo de produção! Só não esqueça de deixar o CSS inteiro em uma versão de desenvolvimento, pois quando você for fazer alguma manutenção no site você vai precisar do arquivo não minificado, acredite!

Link para o Avivo Minify.

Então essas foram algumas ferramentas que ajudam muito aqui na WebingPro na hora do desenvolvimento FrontEnd!

E pra você, quais são as ferramentas que estão sempre com você na hora de desenvolver um site?

Conheça o autor do post

Vinicius Cardoso:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3879
Prazer eu sou um nerd de carteirinha! Pelo menos é o que eu penso de mim, já que eu adoro tecnologia e gadgets tecnológicos... Coisas novas me fascinam, por isso que que trabalho com Marketing Digital, afinal é um universo que está em constante mudança. Viajar, sair pra dançar, ir para praia, praticar esporte, ver filme e jogar xbox é o que faço no meu tempo livre.