Achei muito bacana esse artigo do Leandro Oriente. Da codificação inicial ao SEO, dicas essenciais para quem quer ser ou já se considera um front ender.
HTML E CSS
Essas linguagens são requisito básico de qualquer vaga para desenvolvimento Front End.
Por mais que você vá trabalhar focado em projetos em Javascript é essencial ter conhecimentos avançados em ambas as linguagens.
Saber usar bem a semântica do HTML 5 e utilizar CSS 3 para evitar o uso de imagens em excesso também deve fazer parte do seu cotidiano.
Quer saber se realmente está num nível aceitável de conhecimento? Tente fazer um menu drop-down de 3 níveis, um lightbox (sem o JS, só os estilos) ou pegue um case de sucesso como o Behanceou Dribbble e tente reproduzir de maneira semelhante.
Se tiver dificuldades nessas tarefas é um sinal claro que você está atrasado.
JAVASCRIPT
Ter uma base sólida em Javascript é outro requisito essencial de um desenvolvedor.
Você não precisa ser um Expert e saber todos os detalhes da linguagem, mas é de extrema importância que saiba se virar bem e que não corra de Javascript como o Diabo da cruz.
Quando digo base sólida em Javascript não significa saber colocar um Lightbox ou um Accordion em jQuery na página.
Vai chegar uma hora onde você vai precisar de algo específico demais para resolver com um plugin pronto e vai ter que meter a mão na massa.
Code school é uma boa pedida. E o melhor, é free.
LÓGICA DE PROGRAMAÇÃO E ALGORITMOS
Obviamente para meter a mão na massa no Javascript você vai precisar saber algoritmos e trabalhar um pouco sua lógica de programação.
O seu dia a dia vai estar recheado de loops, condicionais e variáveis. Não saber lidar com isso vai te engessar no nível semi-júnior.
“Mas eu odeio programação. Se quisesse programar virava Back End”
Por favor, jovem. Ative o código secreto do meu blog. “Ctrl + w” (Cmd para os felizardos).
JQUERY
Malhei o jQuery algumas linhas atrás mas agora venho me redimir. A library é fantástica. Conseguiu tornar coisas relativamentes complexas em Javascript em códigos fáceis e intuitivos.
Como exemplo principal vou citar as requisições Ajax. Qualquer iniciante em 15 minutos na documentação do jQuery consegue entender como funciona e faz seus primeiros requests.
Agora se você nunca fez, procure pela forma nativa de realizar resquests Ajax.
É algo completamente chato e confuso ao primeiro olhar e somente chato ao segundo.
Porém fica o alerta que citei quando falei do Javascript. Não se prenda a plugins. Procure entender Javascript antes e enteder o jQuery.
É simples e vai te forçar a sair da zona de conforto dos plugins prontos.
Cedo ou tarde os plugins não vão te atender e você vai precisar aprender em meia hora às 4:15 da manhã como fazer uma integração com o Facebook Connect porque a entrega do projeto do cliente porre é no dia seguinte.
Já imaginou a reunião?
“Então seu Jeremias, o login ficou sem integração com Facebook porque a comunidade web não fez um plugin pra isso”.
Deprimente né?
FERRAMENTAS DE DESENVOLVEDOR DO CHRO… BROWSER
Saiba usar o browser como ferramenta para debugar o seu código. Nele você pode identificar e corrigir pequenos deslizes de CSS ou até mesmo criar um componente novo, analisar header’s de resposta das suas requisições para identificar possíveis erros e debugar literalmente sua aplicação Javascript.
Além disso você pode analisar a perfomance do seu site e como o browser está renderizando o após as interações com Javascript.
~~ mensagem subliminar ~~ Use o google chrome ~~ mensagem subliminar ~~
NOÇÕES GERAIS DAS DEMAIS ÁREAS DE TI
Já trabalhou com um Designer que veio de mídia offline e nunca trabalhou com desenvolvimento web?
Não? Nem queira. É um desastre total.
O mesmo vale para um front end que não tem a mínima idéia de como funciona uma aplicação web.
Enteder os processos que levam o “/api/user” a entregar as informações do usuário num JSON perfeito é essencial para evoluir na sua carreira.
Assim como entender como as informações do site são armazenadas, como o servidor gerencia o cache das páginas, como o request do seu browser trás o seu site para o usuário ou como o google ranqueia e indexa o seu site.
Não digo para ser o sábio da colina em TI, mas pelo menos entender o que se passa no resto da aplicação.
Sua vida vai ficar mais simples e a vida dos seus companheiros de trabalho também.
SAIBA MANUSEAR ALGUM SOFTWARE DE EDIÇÃO DE IMAGEM
O cliente vai olhar pro layout que o Designer mandou e vai querer que aquele JPEG tome vida. Aliás a empresa inteira vai querer e cabe a você fazer isso.
Novamente, você não precisa ser o Fábio Sasso do Photoshop, porém saiba o básico dele e do Fireworks.
É mais comum ver designers trabalhando com Photoshop, porém alguns usam o Fireworks e para descobrir medidas, cores e pegar algumas imagens não é necessário certificação Adobe.
Meia horinha no google é mais que suficiente para aprender a extrair informações de qualquer layout.
Fireworks ou Photoshop? Quiabo.
Posso usar GIMP? Se o Designer não mandar um arquivo .psd, porque não?
VERSIONAMENTO
Se você não sabe do que se trata. Pare, salve o post nos favoritos, entre no google, comece a estudar loucamente, termine de estudar loucamente, volte e prossiga com o post.
Versionar código se tornou uma prática essencial no processo da grande maioria das empresas.
Você consegue em poucos passos desfazer uma merda catastrófica que tenha feito ou simplesmente retornar a uma versão estável ao ver que a sua idéia brilhante não reluzia tanto assim.
Git é o preferido em boa parte das empresas. Normalmente é usado em conjunto com Github.
Existem empresas que utilizam SVN e pouquíssimas fogem desses dois.
Se dominar bem o Git já está de bom tamanho.
Adendo. O Breno Calazans recomendou a leitura do Semantic Versioning. Excelente leitura sobre como organizar as versões do seu código.
DICAS RÁPIDAS
– Se tiver oportunidade, trabalhe com o Mac OS, se não for possível, tente utilizar o Linux durante um tempo. Mesmo que por experiência como OS secundário.
Tente não ficar 100% preso ao mundo Windows.
Não tenha medo do Terminal. Para versionamento e algumas excelentes ferramentas de automatização, como o Grunt ou o Bower por exemplo ele é essencial.
Frequente eventos da área. Costumam ser muito bons e recheados de novidades.
Tenha um Linkedin atualizado.
Se for viável, tenha um portfólio e/ou conta no github.
Jamais mande seu currículo como .doc para nenhuma empresa. Se for mandar um arquivo que seja um pdf.
Não use o Dreamweaver.(ponto)
FIM DA PARTE FÁCIL
Com essas skills você já consegue emprego em boa parte das agências ruins do país e em algumas médias.
Vai ganhar mal, se estressar, madrugar na agência diariamente e ser explorado mas veja pelo lado bom, você não trabalha em Call center.
Em um ou dois anos você consegue um domínio razoável em todos os pontos que citei aqui se mantiver um ritmo razoável.
Se for bem dedicado e autodidata, consegue em bem menos tempo. Se tiver bagagem de outras áreas de TI vai ter mais facilidade ainda.
O importante nessa etapa é não se acomodar. Dominar essas skills te abre muitas portas mas não é o suficiente para conseguir empregos mais gratificantes.
Certa vez vi uma palestra do Zeno Rocha (não foi nesse post, mas esse post é muito bom também) onde ele frisou isso. Aliás, ele sempre frisa.
“Saia da zona de conforto.”
Estar confortável com sua bagagem de conhecimento atual é um péssimo sinal (caso você não seja John Resig por exemplo). Sempre procure sair em busca de algo novo.
O mercado de trabalho adora isso e você vai ver que de passo em passo vai atingir níveis que pareciam muito complexos no início de carreira.
NICE TO HAVE
Agora vamos falar de coisas que vão te destacar um pouco da multidão. Não muito, mas já vai dar pra almejar posições bem mais confortáveis no mercado.
PERFOMANCE
Perfomance foi segundo pesquisas recentes realizadas por mim, otema mais abordado em eventos Front End no ano de 2012.
Todo mundo deu pitacos, publicaram guidelines (aliás, parabéns aos envolvidos), falaram, falaram e falaram muito.
Se você deseja uma vaga numa empresa de ponta, tem que saber de cor todas as regras de todos os guidelines de performance.
Hum segundo de carregamento a mais no seu blog pessoal não vai te trazer muitos prejuízos. Meio segundo a mais num e-commerce, pode valer mais que o seu salário dependendo do porte da empresa.
Não vou entrar no mérito das medidas eficazes, já que muitos já fizeram isso, mas recomendo que saiba todas.
SEO
Leia a MestreSEO (Agência Mestre agora) mensalmente.
Do que adianta lançar um produto sensacional, um app revolucionário ou um portal de conteúdo se o seu site ranqueia pior que um site da Wix?
Saiba o básico, principalmente no que tange front end. Poucos detalhes já dão ganhos mensuráveis quando se trata de SEO.
Aliás, segundo o Google eu sou o Desenvolvedor Front End mais relevante do Brasil. Na minha frente, por hora, só a Wikipedia.
Só o google mesmo pra falar essas bobagens né?
OOCSS E PRÉ-COMPILADORES
Saiba trabalhar com CSS modular. Não vou entrar no mérito das definições técnicas, mas saber OOCSS principalmente para trabalhar com portais que possuem milhares (milhões em alguns casos) de páginas é um quesito vital pro negócio.
Imagine uma Globo.com com o volume de conteúdo que tem usando CSS de forma amadora? Inviável né?
Empresas de grande porte precisam ter o CSS muito bem modularizado para que a manutenção seja simples e que o reaproveitamento seja feito tornando a aplicação mais leve e consistente.
Um case interessante para entender o funcionamento são os Frameworks como Twitter Bootstrap e Foundation que tratam muito bem disso.
Vale abrir o código fonte e observar como as classes são muito bem aproveitadas.
Uma ferramenta boa para ajudar nessa organização do código são os pré-compiladores.
Eles abrem um leque de opções bem maior para o desenvolvimento do seu CSS.
Os mais populares são LESS e SASS e ambos são nice to have.
CONHECIMENTO REGULAR EM ALGUMA(S) LINGUAGEM(NS) SERVER SIDE.
Obviamente não é um quesito obrigatório para desenvolvedores front end, porém boa parte das grandes empresas cobram.
O que eles precisam não é de um programador que atenda a ambos os lados (apesar de serem muito bem vindos quando aparecem) e sim de um front end que saiba trabalhar bem em paralelo com desenvolvedores Back End (chamarei apenas de back end de agora em diante).
Se você precisar interromper um back end para alterar um for ou para mudar a formatação do HTML gerado pelo servidor de 5 em 5 minutos ninguém anda.
O ideal é que você saiba se virar com tudo que esteja relacionado ao client, seja isso um HTML estático ou uma página compilada no servidor.
Caimos aqui, novamente na Lógica de programação e algoritimos. Esse é um quesito essencial além do conhecimento da linguagem usada no projeto para não fazer cagada e gerar um problema gigante ao invés de não atrapalhar o companheiro.
Se você trabalha em agência já deve ter passado por isso com PHP e WordPress. Que por sinal não é mais do que sua obrigação saber manusear, mesmo que de forma mais amadora e superficial.
MAGIAS NEGRAS EM JAVASCRIPT
Para trabalhar em agência (generalizando) basta ter uma base razoável de Javascript e jQuery. Para trabalhar numa empresa de maior porte com software próprio, você vai precisar ir além do básico.
Geralmente empresas assim possuem necessidades mais profundas e precisam de profissionais capazes de desenvolver verdadeiras aplicações client side.
O exigido nesses caso é total domínio de Javascript e domínio/conhecimento em algum framework.
Os mais comuns são Angularjs (menino de ouro do google), Backbone, PhoneGap (mobile), Knockout, Ember…
Obviamente o framework nesse caso é somente um diferencial. O importante mesmo é ter domínio (quase) absoluto de javascript.
CONCLUINDO
Obviamente existem dezenas de outros pontos que não abordei e que são muito importantes.
Alguns ficaram omitidos em alguns tópicos, outros eu esqueci de comentar mesmo.
Acredito que seja um post um pouco inútil para os profissionais que já estão sólidos no mercado, mas que possa ser essencial para quem está começando e não sabe bem que rumo tomar.
Costumo esbarrar frequentemente nesse tipo de dúvida em grupos do Facebook e na minha caixa de entrada.
Caso tenha notado algum deslize, tenha alguma sugestão diferente ou alguma dúvida, não deixe de comentar.
Quanto mais enriquecedora a página, maiores as chances de pintarem alguns bons novos profissionais em breve.
Marcelo Moreles 