Artigo original: https://www.freecodecamp.org/news/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503/

Escrito por: Sergei Garcia

Primeiro, eu gostaria de me apresentar. Meu nome é Sergei Garcia. Sou um desenvolvedor de front-end em tempo integral, com 2 anos de experiência. Nesse tempo, trabalhei como desenvolvedor de front-end para uma empresa de consultoria que está entre as 500 da Forbes e para uma pequena empresa.

Isso pode não parecer muita experiência, mas terminar meu segundo ano como desenvolvedor foi um grande marco para mim. Eu não tinha experiência real fazendo desenvolvimento para a web — e não tinha muita experiência em programação em geral, somente alguns treinamentos básicos em C# e Java que obtive de alguns cursos on-line. Também não era formado em Ciência da Computação. Na verdade, minha graduação foi em gerenciamento de projetos de TI.

Eu nunca escrevi sobre minha experiência, apesar de toda a ajuda que recebi de recursos maravilhosos como o Medium, o Stack Overflow e subreddits de programação do Reddit. Então, hoje, eu decidi mudar isso. Hoje, vou contar sobre o que deu certo e o que não deu certo. Se você estiver embarcando nessa jornada, espero que tenha mais sorte do que eu.

Sei que há muitos artigos como este, mas não são muitos os que discutem o processo com o benefício de dois anos de retrospectiva prática.

Vou começar com a minha jornada, incluindo o que deu errado ao longo do caminho. Se você só se importa com as minhas sugestões para o caminho mais curto possível para se tornar um desenvolvedor da web desde o início, fique à vontade para pular para a última seção: O caminho mais curto.

Então, sem mais delongas, vamos começar!

Noções básicas

Depois de decidir que queria entrar em desenvolvimento para a web, a primeira pergunta em minha mente foi "O que eu preciso aprender?" Depois de fazer algumas pesquisas, acabei traçando meu caminho de aprendizagem com base no que a maioria das posições de desenvolvedor para a web de nível básico pediam:

  • JavaScript
  • HTML e CSS
  • Pré-processadores de CSS (LESS e SASS)
  • Design responsivo
  • Angular
  • Padrões de design
  • Git
  • NodeJS
  • Automatizadores de tarefas (como o Grunt e o Gulp)

Veja como foi.

JavaScript

Comecei minha jornada aprendendo JavaScript através da CodeSchool (atual PluralSight, paga) e da Codecademy (gratuita). Se você não sabe sobre eles, eles são ótimos sites que permitem que você aprenda a programar usando apenas o seu navegador.

Nota da tradução: a opinião do autor do texto sobre a antiga CodeSchool é positiva. No entanto, ele demonstra, em partes do texto, não gostar das alternativas oferecidas pela PluralSight. Este artigo, porém, foi lançado antes de a Code School ter sido fechada e seus cursos terem sido movidos para a PluralSight. Caso tenha interesse em consultar os cursos da CodeSchool na PluralSight, é possível fazer esta busca aqui. Na tradução, buscamos atualizar os links sempre que possível.

Descobri que recursos de aprendizagem como esses eram os melhores quando você está apenas começando. Apenas saiba que esse método de aprendizagem fica cansativo rapidamente quando você entra em coisas mais avançadas, já que seus algoritmos para verificar se você resolveu o exemplo de código corretamente têm alguns problemas de precisão. Os dois cursos introdutórios ao JavaScript foram excelentes e eu recomendo os dois.

Assim que tirei o básico do caminho, comecei a obter uma base mais forte em JavaScript lendo o livro Eloquent JavaScript: A Modern Introduction to Programming (em inglês, gratuito – a segunda edição do livro tem uma tradução gratuita em português), de Marijn Haverbeke.

Esse livro foi recomendado para mim por muitas pessoas nos fóruns de JavaScript como uma leitura obrigatória, e por um bom motivo. Foi um livro difícil – especialmente se você está apenas aprendendo programação como eu estava naquela época – mas fico feliz por não ter desistido e continuado. Foi fenomenal devido ao vasto escopo de conceitos de programação que abrange, mesmo que, às vezes, fosse um pouco denso demais. Faça o que fizer, não pule os desafios de código. Depois de terminar esse livro, você poderá finalmente dizer com confiança que tem uma boa compreensão do JavaScript.

Você também pode, como opção, aprender jQuery (embora eu realmente não recomende aprendê-lo agora – mais sobre isso mais tarde). Você pode aprender sobre ele neste curso de jQuery (em inglês).

HTML e CSS

Depois de aprender JavaScript, passei a aprender os fundamentos de HTML, CSS e design para a web através deste caminho de aprendizagem de HTML e CSS. Esses cursos ainda são meus favoritos hoje, já que o ritmo é ótimo e o escopo geral do que cobrem me permitiu adquirir uma base mais forte.

Você também experimentar algo como o curso HTML e CSS da Codecademy e obter resultados semelhantes. Se estiver pronto para um desafio, o curso do Udacity de Introdução a HTML e CSS é muito mais completo e um pouco mais desafiador.

Bônus: se você puder colocar as mãos no livro HTML and CSS: Design and Build Websites, de Jon Duckett, ele também é um ponto de partida sólido para aprender HTML e CSS (com uma pitada de design para a web). Ele tem avaliações bem altas (4,7/5 na Amazon) e oferece uma introdução sólida ao mundo do desenvolvimento web. É um belo livro graças ao seu design limpo, com letras grandes e páginas coloridas. Eu frequentemente volto a esse livro só para admirá-lo.

Less/Sass

Para quem não conhece, Less e Sass são transpiladores de CSS que permitem escrever CSS de uma maneira mais elegante. Isso permite que você faça coisas que normalmente não são suportadas, como aninhar regras do CSS. Uma vez terminado, esses transpiladores de CSS "compilam" seu código e o convertem em CSS normal.

Existem 2 grandes transpiladores de CSS no momento: o Less e o Sass. O Sass é o mais popular, mas eu achei mais fácil aprender Less primeiro, principalmente porque usar o Sass em seu computador requer também instalar Ruby, algo que eu não gostava.

Você pode obter uma visão geral rápida, mas completa, do Less usando o Online Less Compiler, da WinLess, e seus exemplos de código para ver como seu código Less se transformaria em CSS. Você também pode experimentar o Sass on-line usando o SassMeister (embora ele não inclua exemplos de código).

Tanto faz se você aprender o Less ou o Sass primeiro. Eles são extremamente semelhantes. Então, uma vez que você conheça um, praticamente conhecerá o outro. Você pode encontrar uma ótima comparação rápida entre Less e Sass no artigo de Shelby Moulden, Comparison between LESS & SASS (em inglês).

Design responsivo

Eu aprendi originalmente sobre design responsivo e sobre o Bootstrap usando o caminho de HTML e CSS que citei acima, mas, recentemente, achei o curso da Udacity, feito pelo pessoal do Google, sobre o básico em design responsivo para a web fantástico. Ele cobre o básico e mais, de maneira muito mais completa.

Você pode fazer design responsivo sem qualquer estrutura adicional, mas é muito mais fácil com a ajuda de uma estrutura responsiva como o Bootstrap. A documentação oficial do Bootstrap é muito bem feita. Então, você não terá problemas em começar com ele.

Se você está tendo problemas para entender os princípios básicos, leia o post do blog da Froont sobre os 9 princípios básicos do design responsivo para a web (em inglês). Ele tem belas animações, limpas e simples, que ajudam a ilustrar visualmente os princípios do design responsivo para a web.

Angular

Eu realmente não sabia o que exatamente o Angular era naquela época, mas eu sabia que todo mundo estava falando sobre ele, e que, se eu quisesse me tornar um desenvolvedor para a web, eu precisava aprendê-lo. Descobri que o Design Decisions in AngularJS, da Google, dava a melhor visão geral do que era o AngularJS e sobre como ele melhorou a criação de aplicações para a web.

Primeiro, pensei em aprender AngularJS através de sua documentação oficial, mas isso acabou sendo uma péssima ideia. A documentação não era muito fácil para iniciantes, e a formatação desordenada dificultava a leitura e a compreensão.

Passei, então, a aprender AngularJS através da antiga CodeSchool (atual PluralSight). Com minha experiência positiva nos cursos de JavaScript e de CSS também de lá, eu esperava nada menos do que um ótimo curso. Eu estava errado. O curso foi um desastre desde o início, já que o algoritmo usado para verificar se você acertou o exemplo de código, às vezes, não funcionava direito e marcava sua solução claramente certa como incorreta. Houve até momentos em que tudo o que era necessário para consertar o sistema de validação quebrado era uma atualização de página. Quanto ao conteúdo do curso, também não foi dos melhores. Ele fez um trabalho mais ou menos em explicar os componentes básicos de uma aplicação em AngularJS, mas fez um péssimo trabalho em integrá-los em uma aplicação real. Acabei ficando com muito mais perguntas do que quando eu comecei.

Depois de algumas pesquisas em fóruns, descobri a Egghead.io (gratuita, mas com uma versão paga), onde tive muito melhor sorte. O material do curso era muito mais limpo, conciso e completo, proporcionando uma experiência muito melhor. Sem mencionar que, além de seus cursos, eles têm aulas de 2 a 5 minutos que cobrem tópicos importantes (por exemplo: o que é um controlador? O que é um filtro? O que é $scope?) Isso facilita muito a compreensão do básico. Eles também têm alguns vídeos que exigem pagamento, mas geralmente são os que cobrem tópicos de Angular mais avançados, que você não precisará até mais tarde. Fiz o curso AngularJS Fundamentals e fiquei totalmente satisfeito com os resultados (e também me tornei um grande fã dos cursos da Egghead.io no processo).

Padrões de design

Padrões de design são basicamente soluções de código reutilizáveis que podem ser repetidamente usadas para resolver problemas comuns de software. Ter uma base sobre eles tornará você um desenvolvedor de software muito mais competitivo em qualquer linguagem de programação. Isso também tornará mais fácil para você entender o código de outras pessoas, já que você identificará rapidamente qual padrão de design foi usado no código para entendê-lo melhor.

Descobri que as 2 melhores fontes para aprender isso são os cursos JavaScript Design Patterns, da doFactory, e Learning JavaScript Design Pattterns, de Addy Osmani. Achei o curso da doFactory muito mais fácil de entender, mas o livro de Addy Osmani era muito mais completo.

Ferramentas do desenvolvedor do Chrome

O Chrome traz as ferramentas mais poderosas para um desenvolvedor para a web. Quanto mais cedo você dominar as ferramentas do desenvolvedor, mais tempo você pode economizar mais tarde. O curso gratuito Explore and Master Chrome DevTools faz um ótimo trabalho em apresentá-los.

Git (Controle de versão)

Ah, o Git — a ferramenta de que eu nunca soube que precisava até descobrir o que ela poderia fazer. O Git basicamente permite que você acompanhe as alterações feitas no seu código para que, se as coisas derem errado, você possa reverter para um ponto anterior no tempo. Ele também permite que você veja o histórico do seu código.

Achei o curso gratuito do Github uma maneira amigável de se começar. O treinamento de Git da Atlassian foi fantástico, pois cobre os comandos mais avançados disponíveis. O roteiro de aprendizagem de Git da antiga CodeSchool (atual Pluralsight) também é ótimo em cobrir os fundamentos do Git.

NodeJS

Não demorou muito para eu aprender que ter uma compreensão básica de NodeJS me ajudaria muito na minha busca de me tornar um desenvolvedor para a web (mais sobre isso em breve).

Tentei os cursos da antiga CodeSchool no Node, mas achei que eles realmente careciam de conteúdo. Achei a NodeSchool.io muito melhor para o entendimento do básico, além de ser divertida! Amei a abordagem prática que ela oferecia, que era semelhante a da CodeSchool e da Codecademy — com o bônus de que eu estava realmente executando o NodeJS.

Automatizadores de tarefas (Grunt e Gulp)

O Grunt e o Gulp foram uma grande surpresa para mim, pois eu não tinha ideia de que ferramentas como essas existiam – mas estou extremamente feliz pelo fato de que elas existam! Basicamente, esses automatizadores de tarefas permitem automatizar tarefas comuns. Por exemplo, lembra do Less e do Sass? Normalmente, você teria que executar manualmente o compilador de CSS toda vez que você fizesse uma edição para que ele compilasse o CSS e, em seguida, atualizasse o navegador. Usando um automatizador de tarefas, você pode configurá-lo para observar seus arquivos Less/Sass em busca de alterações e, quando detectar uma alteração, compilar seu CSS e atualizar automaticamente o navegador. Isso é imensamente útil para reduzir seu tempo de desenvolvimento.

Existem 2 automatizadores de tarefas principais no momento: o Grunt e o Gulp. Embora eles façam exatamente a mesma coisa, eles funcionam de maneiras muito diferentes, com o Grunt sendo muito mais detalhado e orientado à configuração, enquanto o Gulp é mais rápido de escrever, dando preferência ao código em vez de a configuração.

Conhecer o NodeJS ajudará você a escrever arquivos do Grunt e do Gulp melhores, já que ambos são executados no NodeJS. Você pode escolher o que quiser, mas achei o Gulp muito mais fácil de aprender e escrever. Eu ainda hoje prefiro p Gulp por causa de sua abordagem minimalista – mas poderosa – baseada em pipes.

Achei que os cursos da Scotch.io sobre Grunt e Gulp estão entre os melhores que existem.

Desafios que enfrentei no meu primeiro emprego

Uma vez que eu cobri os fundamentos do desenvolvimento para a web, eu estava pronto para a minha primeira entrevista em desenvolvimento para uma posição de nível básico. Não vou entrar em detalhes sobre a entrevista, já que esse não é o foco principal deste artigo. Vou dizer, apenas, que me disseram que meu conhecimento relativamente forte de JavaScript me ajudou a garantir a posição. (Obrigado, Eloquent JavaScript!)

Devo dizer que fiquei bastante nervoso no meu primeiro projeto. Envolveu a criação de componentes reutilizáveis para a web com HTML, CSS e JavaScript, juntamente com Bootstrap, Sass e Grunt como ferramental. Os dois maiores erros que encontrei no início foram:

  1. Medo do fracasso. Como eu era o novato, estava constantemente com medo de meu código estar errado ou malfeito. Então, passei muito tempo verificando tudo e aderi às melhores práticas de programação. Por causa disso, raramente tentei soluções criativas de novas maneiras por medo de que pudesse não funcionasse corretamente no final. Isso efetivamente diminuiu minha vontade de aprender coisas novas.
  2. Fazer as coisas porque a pessoa "X" que sabe melhor do que eu disse isso. Fiz muito disso no início. Embora não esteja completamente errado fazer as coisas de uma certa maneira apenas porque o especialista "X" no assunto disse isso – sem tentar saber o porquê – me levou a não saber realmente quando as coisas foram feitas da maneira que foram. Logo, aprendi que havia exceções para tudo, e que você sempre deve tentar saber a razão por trás das melhores práticas.

Felizmente, tive um líder de equipe compreensivo durante meu primeiro projeto, que me ajudou a superar esses problemas. Ele constantemente me motivava a tentar coisas novas, mesmo que as coisas dessem errado às vezes. Ele também me disse para questionar tudo, até mesmo seus ensinamentos.

Com o tempo, aprendi a lição. A partir daí, sempre fui uma pessoa ansiosa para tentar coisas novas. Eu sempre tento entender por que as melhores práticas existem, quando elas estão certas e quando não se aplicam a uma situação.

Usar o AngularJS em um projeto real também representou um grande desafio para mim. Isso ocorreu principalmente porque muitas das coisas que eu fiz com ele, eu fiz sem entender totalmente por que aconteciam. Costumava pensar que era "a magia do Angular".

Houve muitas vezes em que eu gostaria de saber como o Angular realmente funcionava, mas me assustava simplesmente olhar para a documentação.

Acabei me deparando com um livro incrível chamado Build Your Own AngularJS. Eu não li todo ele, mas ler a seção sobre Escopos e sobre os Watchers (em português, algo como "observadores") e como eles funcionavam realmente revelou como a magia por trás do Angular não era, realmente, mágica. Era apenas uma maneira inteligente de manter a vinculação de dados usando verificaçãoe escopos aninhados. Eu recomendo esse livro para quem busca entender completamente o AngularJS.

O outro desafio que enfrentei um ano depois foi a rapidez com que o desenvolvimento para a web progrediu. Eu tinha acabado de dominar AngularJS e o Grunt. Estava me sentindo todo orgulhoso e poderoso – apenas para logo descobrir que Gulp e ReactJS estavam no horizonte. Um ano depois de aprendê-los, o Webpack começou a ganhar terreno – e eu tive que aprender isso também. Como você pode imaginar, uma grande parte de mim ficou bastante decepcionada com a rapidez com que alguns dos meus conhecimentos se tornaram obsoletos. Um colega de trabalho, porém, logo me esclareceu dizendo algo que mudou a forma como eu via bibliotecas e estruturas para sempre:

"Bibliotecas e frameworks podem se tornar obsoletos, mas os conceitos e soluções que propõem muitas vezes sobrevivem ao tempo."

Ele estava certo. O AngularJS pode ter se tornado obsoleto, mas entender completamente a magia por trás dele me ajudou a entender melhor a arquitetura de componentes da web do React, que era uma melhoria do conceito de diretivas do Angular. Também me ajudou a entender como o ReactJS ganhou tanta popularidade, bem como que tipo de futuro que eu poderia esperar.

Não me lembro de ter enfrentado outros grandes desafios em meus projetos subsequentes. O que vou dizer, no entanto, é que, ao longo dos 2 anos em que tenho trabalhado com desenvolvimento para a web, a coisa que mais ajudou a ter sucesso (de acordo com meus próprios colegas de trabalho) foi minha empolgação e minha motivação para estar sempre à procura de coisas novas para aprender. Logo descobri que essa era uma combinação vencedora no desenvolvimento para a web, já que as coisas por aqui mudam muito, muito rápido, com novos frameworks e bibliotecas surgindo constantemente.

Por outro lado, a outra coisa que me ajudou muito – e algo que descobri muito recentemente, na verdade – foi entender o que não aprender. Isso se tornou fundamental para o meu processo de me tornar um desenvolvedor para a web melhor.

Não é incomum ver pessoas criticando o ritmo anormalmente rápido de evolução das tecnologias da web, ou como uma nova biblioteca ou estrutura do JavaScript é lançada quase todos os dias. Com o tempo, porém, eu entendi:

Você não precisa aprender cada biblioteca ou estrutura nova.

Muitas vezes, é uma ótima ideia fazer um aplicação simples do tipo Hello World como exemplo para poder ver o que uma estrutura oferece. Então, você pode seguir em frente. Geralmente, porém, você deve tentar se concentrar no que melhor se adapta às necessidades do seu projeto. Isso pode ser difícil no início, mas, felizmente, existem ótimos, lugares como o Stack Overflow, o Medium e o Reddit, onde você pode encontrar discussões úteis sobre os frameworks e descobrir quais se encaixam melhor em seus casos de uso específicos.

Indo mais longe

Nos anos seguintes, passei a melhorar continuamente das seguintes maneiras:

Javascript

Depois de terminar o Eloquent JavaScript, é bastante fácil dizer e sentir que você domina JavaScript, mas então vem o You Don't Know JS e absolutamente destrói você (ou pelo menos fez isso comigo). Essa série de livros (gratuita por sinal) foi mencionada para mim várias vezes por alguns desenvolvedores sêniores no escritório como o livro para ler, e que só depois de lê-lo eu poderia dizer que sei totalmente JavaScript. Eles estavam certos, já que, página após página, ele continuamente me surpreendeu sobre a complexidade do JavaScript, bem como muitas, muitas armadilhas comuns que pessoas experientes e sem experiência, sem uma compreensão adequada do JavaScript, podem ter.

Ler essa série de livros realmente abriu minha mente. Também a recomendo para quem quiser se chamar um desenvolvedor especialista do JavaScript. Uma vez que você tirou isso do caminho, há 2 recursos extras que eu recomendo para obter um conhecimento de JavaScript ainda mais avançado:

  • JavaScript, The Better Parts: Uma palestra incrível de D. Crockford, que fala sobre os maiores pontos fracos do JavaScript, suas "Foot Guns", e como utilizá-las como seus pontos fortes.
  • The Two Pillars of JavaScript: um ótimo artigo do reconhecido autor Eric Elliott, que escreve artigos sobre JavaScript no Medium, que fala sobre os 2 grandes pilares do JavaScript: herança prototípica e programação funcional.

Depois de ter uma compreensão profunda de JavaScript, prossiga com o ECMASCript 2015 (também conhecido como ES6), o padrão do JavaScript mais recente e atual. O artigo da Smashing Magazine ECMAScript 6 (ES6): What's New In The Next Version Of JavaScript é uma ótima breve revisão do que há de novo no ES6. Você pode tentar ES6 no navegador usando o transpiler on-line do Babel.

CSS

O CSS pode ser uma bagunça e ficar desorganizado muito, muito rapidamente. Houve algumas metodologias diferentes propostas para escrever CSS mais limpo, mas duas delas se destacam. Recomendo que você leia sobre elas o mais rápido possível para se manter competitivo:

  • SMACSS: arquitetura escalável e modular para o CSS. Este é um guia flexível para o desenvolvimento de sites pequenos e grandes.
  • BEM: uma metodologia que ajuda você a obter componentes reutilizáveis e compartilhamento de código no front-end.

Eu, pessoalmente, prefiro o SMACSS por causa de seu visual mais limpo, mas algumas empresas e frameworks do CSS ainda usam o BEM. Então, vale a pena conhecer ambos.

Você também deve começar a se concentrar no desempenho do CSS. O artigo da Smashing Magazine, Managing Mobile Performance Optimization, e o artigo da HTML5 Rocks, High Performance Animation, fizeram um ótimo trabalho em fornecer uma vantagem inicial a respeito. Uma leitura rápida dos artigos deve dar a você uma base sólida.

Bundlers do JavaScript

Nesse momento, você já deve ter uma forte compreensão de Grunt ou Gulp. A próxima etapa é adicionar um bundler do JavaScript ao seu automatizador de tarefas, o que permitirá uma organização mais modular da sua aplicação em JavaScript.

Os melhores no momento são:

  • Browserify: permite que você solicite módulos no navegador, agrupando todas as suas dependências.
  • Webpack: basicamente, o Browserify versão avançada. Mais difícil de configurar e ajustar.

O minicurso Getting Started with Browserify da Scotch.io pode dar um pontapé inicial para o uso do Browserify, enquanto o artigo de David Fox Powell, Why Can’t Anyone Write a Simple Webpack Tutorial?, é uma ótima introdução ao Webpack, divertida de ler.

Pessoalmente, não passei muito tempo usando o Webpack, mas, no meu tempo com ele, tenho que dizer que tem sido incrível – mesmo que seja um pouco mais difícil de configurar. Se você está apenas começando, eu usaria o Browserify, já que é muito mais simples de configurar. Apenas esteja ciente de que o Webpack é o futuro, e que projetos maiores estão começando a usá-lo.

React

O React está rapidamente ganhando popularidade, e não parece estar desacelerando – a ponto de as pessoas perguntarem "O React está acabando  com o Angular?"

O programa Learning React.js: Getting Started and Concepts, da Scotch.io, fornece uma visão geral sólida do React. Depois de tirar isso do caminho, continue com o curso React Fundamentals, da Egghead.io, onde você criará uma aplicação em React totalmente funcional e, em seguida, migrará para a sintaxe da ES6. Você pode acompanhar a documentação oficial do React, que é muito bem-feita e permitirá que você a domine completamente.

Como o React é apenas a visualização, é altamente recomendável que você aprenda Redux. A maioria dos cursos sobre Redux é um pouco complexa, na minha opinião, mas CSS Tricks Leveling Up with React: Redux consegue um ótimo equilíbrio entre simplicidade e ser informativo ao começar com Redux.

Você também já deve ter ouvido falar do Flux neste momento, mas se você está se perguntando por que você deve usar o Redux em vez do Flux, confira a pergunta no Stack Overflow sobre Por que usar o Redux em vez do Flux? que foi respondida pelo criador do Redux!

Relembrando meus erros e o que aprendi

Cometi muitos erros nos meus 2 anos de aprendizado de desenvolvimento para a web. No geral, acho que meu maior erro foi não dominar o básico antes de passar para bibliotecas e frameworks. Acho que isso se aplica a quase todas as linguagens de programação por aí, mas, na minha opinião, se aplica ainda mais ao JavaScript. Isso ocorre porque, em muitos aspectos, o JavaScript é uma linguagem quebrada e contém diversos "Foot Guns" (você já deve ter ouvido falar disso se você assistiu à palestra de D. Crockford, "JavaScript, The Better Parts", que mencionei anteriormente). Eles podem tornar a vida insuportavelmente difícil se você não os entender completamente.

Lembro-me de uma vez ter ficado preso em um problema do AngularJS com $scope que levei 3 dias para depurar, apenas para descobrir que não era nem mesmo um problema do AngularJS, mas um problema de JavaScript que eu mesmo causei por não entender como ele funciona.

Código limpo

É estranho que eu não veja isso ser falado com tanta frequência. Eu nem sempre me importei em escrever código limpo, mas honestamente é uma das coisas que mais me orgulho de ter aprendido. Isso porque todo mundo adora reclamar como seu último lugar teve uma das piores e mais feias bases de código do mundo. Então, por que ninguém pode falar sobre como o último lugar em que esteve foi maravilhoso? Como seu código acabou tão limpo e bem-feito que eles ficaram orgulhosos dele?

Essa é uma tendência que eu gostaria de mudar, e acredito que uma diferença pode ser feita se um número suficiente de pessoas pressionar por ela. Esforce-se para tornar os nomes de variáveis e funções compreensíveis, mesmo que você tenha que escrever um pouco mais. Não fazer isso só levará você a ter que documentá-lo manualmente em algum momento no futuro para torná-lo mais claro. Isso também fará com que sua base de código geral se torne mais difícil de entender por novos desenvolvedores e por você mesmo. Sim, você mesmo. Por que você mesmo? Porque se você não está aplicando código limpo, o que faz você pensar que seus colegas de trabalho devem aplicá-lo e escrever código limpo para você entender facilmente? É hora de dar o exemplo.

Se isso não for um incentivo bom o suficiente, as pessoas muitas vezes reconhecem e valorizam os escritores de código limpo. Você descobrirá que, escrevendo código limpo, seus colegas de trabalho e amigos gostarão ainda mais de trabalhar com você e, por sua vez, viverão uma vida mais feliz.

jQuery

Alguns de vocês podem notar que eu também não dei muita ênfase ao jQuery. Isso porque, na minha experiência, achei que o jQuery me fez mais mal do que bem no início. Alguns de vocês podem não concordar, mas deixe-me explicar: quando eu aprendi pela primeira vez, a ideia geral que eu tive era de que o jQuery estava em todos os lugares e que você poderia usá-lo para praticamente tudo. Por causa disso, eu me acostumei a usar o jQuery para praticamente qualquer coisa e, para qualquer problema que eu encontrasse, eu procurava uma solução para ele que usasse o jQuery.

Não me entenda mal, o jQuery foi incrível no meu tempo usando-o, tão incrível, na verdade, que eu ignorei cegamente que 90% do que eu fazia com o jQuery poderia ser feito nativamente em navegadores modernos em uma sintaxe igualmente fácil.

Agora, você pode estar pensando: "mas o que há de errado nisso? O jQuery não pesa tanto assim e, usando-o, você ainda acaba escrevendo menos código do que se fizesse as coisas nativamente." Certo, mas usar jQuery sobre APIs nativas não era o problema. O problema era que toda a minha maneira de pensar e todas as soluções para problemas comuns que eu conhecia até então exigiam que o jQuery funcionasse. Isso se tornou um grande problema quando recebi meu primeiro projeto e me disseram que o jQuery não era uma dependência.

Usar o jQuery me tornou inútil sem ele e me fez ignorar completamente os métodos e soluções nativas que sempre existiram. Isso também tornou todas as minhas soluções menos transportáveis, já que usá-las exigia jQuery.

Desde então, tenho me esforçado para não usar o jQuery, a menos que seja absolutamente necessário e realmente forneça uma grande melhoria na eficiência e legibilidade de nossa base de código (por exemplo, na manipulação pesada do DOM).

Mais uma vez, não me entenda mal, o jQuery é ótimo. Se, contudo, eu pudesse voltar no tempo e conhecer meu eu passado que estava apenas aprendendo desenvolvimento para a web, eu me aconselharia fortemente a não aprender tanto jQuery até ter aprendido a fazer as coisas sem ele. Se você está tendo problemas para fazer a mudança como eu fiz, confira You Might Not Need jQuery.

Cursos

Quanto ao material didático: embora muitos dos cursos da antiga CodeSchool tenham sido excelentes (o ramo de HTML e CSS foi especialmente fantástico), alguns de seus cursos sobre frameworks não eram tão interessantes assim (AngularJS, BackboneJS, etc.).

Também fiz muitos cursos da Pluralsight, que não mencionei. Depois de todo esse tempo, cheguei à conclusão de que escolher alguns dos caminhos de aprendizado deles é, em geral, uma má ideia e não confiável. Como seus cursos são feitos por professores que nem sempre (na minha opinião) são muito bons no ensino, descobri que a qualidade dos cursos deles flutua muito, já que seus padrões de qualidade de curso são inexistentes. Já tive cursos em que até a pessoa que dava o curso parecia que estava adormecendo. Eu, honestamente, não tenho tempo de atenção para continuar prestando atenção em um curso de 6 a 10 horas – e muitos deles duram esse tempo, se não mais.

Passei umas boas 80 a 100 horas de treinamento na Pluralsight e, honestamente, gostaria de resgatar uma boa parte desse tempo de volta. Não me entenda mal, há alguns cursos incríveis na Pluralsight, mas o foco deles na quantidade em vez da qualidade realmente me fez perder meu tempo. Eu poderia ter aprendido muito mais se tivesse feito cursos de fontes melhores, como a Egghead.io, onde eles valorizavam mais a qualidade do que a quantidade.

A única razão pela qual eu poderia pensar em alguém usando a PluralSight para outros cursos é para fazer um curso que nenhum outro site tenha em alguma tecnologia mais obscura (como Installshield, ou Xamarin), ou para fazer alguns cursos muito específicos que eles sabem que foram muito bem recebidos e revisados (como o Angular Fundamentals, de John Papa).

No geral, se você quiser usar a Pluralsight, certifique-se de que está fazendo cursos escolhidos a dedo por alguém que os fez primeiro e que são reconhecidos como de alta qualidade e úteis.

Eu também tentei recentemente o treinamento da Team Treehouse e tenho que dizer que estou impressionado com a qualidade dos cursos. O material didático é altamente extenso.

Depois de percorrer os caminhos de aprendizado de HTML, CSS e JavaScript de lá, vejo que você poderia facilmente adquirir a base de praticamente tudo. Não acredita? Basta olhar para as trilhas de aprendizado de lá e me dizer se não são incríveis. Claro, é um pouco caro, já que custam uns 30 dólares por mês, mas, na minha opinião, valem muito a pena. (Estou pagando por eles agora para aprender WordPress, já que preciso dele para um projeto freelance, e o material é ótimo).

Uma palavra sobre os cursos pagos

Senti a necessidade de falar sobre isso, pois notei o consenso geral de que você pode aprender programação sem pagar um centavo e ser tão competitivo quanto alguém que pagou por um curso. Embora seja verdade, não posso enfatizar o suficiente o valor que pagar pelo curso certo tem. Claro, muito do material mais valioso do curso sobre o qual escrevi é gratuito, mas muito dele também é pago. Isso ocorre principalmente porque, às vezes, você simplesmente não consegue superar ter alguém explicando cuidadosamente as coisas para você de uma maneira visual.

Sim, existem cursos pagos de aprendizagem terríveis que eu desaconselho, já que sua proposta de valor é questionável, mas outros, como a Egghead.io, a antiga CodeSchool e a Team Treehouse oferecem um ótimo valor por cada centavo investido, apesar de sua assinatura mensal relativamente cara (25 a 30 dólares por mês). Além disso, todos eles têm avaliações gratuitas de 7 a 15 dias para que você possa ver qual funciona melhor para você.

Se você jogar suas cartas corretamente, pagar 1-2 meses de qualquer uma delas pode facilmente render a você um conhecimento que você só obteria de outra forma depois de se deparar com inúmeros artigos e postagens de blog ao longo de um ano. Eles são honestamente muito bons.

Então, sim, eles não são necessários, mas, se você puder pagar pelo menos um mês, pode ter certeza que terá uma grande vantagem.

O segredo para o sucesso

Eu conheci vários desenvolvedores nos últimos 2 anos em que fui um desenvolvedor para a web. Ao longo da minha jornada, conheci alguns desenvolvedores que realmente se destacaram – desenvolvedores que estavam claramente em um patamar todo próprio, e que eu e muitos outros admiramos. Descobri que essas pessoas compartilhavam algumas características, que eu gostaria de compartilhar com vocês agora. Essas são, na minha opinião, o segredo para ser um desenvolvedor para a web de sucesso:

  • Ame o que faz. Esta é simplesmente a característica mais importante de todas. Se você não ama o que faz (seja estilizar em CSS ou programar em JavaScript), isso vai ficar claro no que você faz. Aqueles que são apaixonados pelo que fazem, muitas vezes, se destacam claramente da multidão.
  • Seja generoso e compartilhe seu conhecimento. É muito fácil querer manter em segredo aquele novo hack de CSS/JavaScript que você encontrou e que resolve os problemas do projeto, mas não faça isso. As pessoas que mais compartilham seu conhecimento costumam ser as mais valiosas, já que podem ser colocadas em qualquer tipo de equipe e melhorar sua qualidade por uma margem enorme.
  • Esteja sempre atento às novidades. A maioria dos desenvolvedores de sucesso que conheci compartilham essa característica comum. Seja lendo blogs, gastando muito tempo em discussões relacionadas à programação ou até mesmo falando sobre o que há de novo no desenvolvimento para a web durante os intervalos para o almoço. Estar à procura de coisas novas o tempo todo permite que os melhores desenvolvedores fiquem sempre à frente na corrida.

O caminho mais curto

Ufa, esse artigo demorou um pouco para terminar (6 horas e contando). Estamos quase terminando! Você deve estar se perguntando: "Ok, história legal, mas qual é o caminho mais rápido?" Assim sendo, aqui está.

Eu organizei isso da maneira que eu aceitaria se pudesse voltar e fazer as coisas direito. Eu também adicionei alguns bônus, que eu adoraria ter tido naquela época. Aproveite!

Javascript

  1. Caminho de aprendizagem de Javascript ou o curso da Team Treehouse (pago) OU Curso de Javascript da Codecademy
  2. Eloquent JavaScript
  3. You Don’t Know JS
  4. JS: The Right Way
  5. Learn ES6 da Egghead.io

HTML e CSS

  1. Caminho de aprendizagem de HTML e CSS ou o curso da Team Treehouse (pago), HTML and CSS: Design and Build Websites de John Ducket OU o curso de HTML e CSS da Codecademy.
  2. Specifics on CSS Specifity da CSS Tricks
  3. Learn CSS Layout
  4. SMACSS
  5. 9 basic principles of responsive web design da Froont
  6. Responsive Web Design Fundamentals da Google na Udacity (faça o curso se não faz os caminho de aprendizagem do número 1)
  7. Managing Mobile Performance Optimization da Smashing Magazine OU Browser Rendering Optimization e Website Performance Optimization da Google na Udacity
  8. Web fundamentals da Google

Ferramentas do desenvolvedor

  1. Explore and Master DevTools
  2. Learn Git da Codecademy e Github
  3. Introduction to Linux Commands da Smashing Magazine
  4. Automate Your Tasks Easily with Gulp.js da Scotch.io

AngularJS

  1. Design Decisions in AngularJS dos desenvolvedores do Google (Introdução ao AngularJS)
  2. AngularJS fundamentals da Egghead.io
  3. John Papa’s Angular Styleguide
  4. Creating a Single Page Todo App with Node and Angular (MEAN) da Scotch.io
  5. AngularJS application structure da Egghead.io (pago) OU cursos de Angular da Scotch.io

React

  1. Learning React.js: Getting Started and Concepts da Scotch.io
  2. Intro to webpack da Egghead.io
  3. React Fundamentals da Egghead.io
  4. Leveling Up with React: Redux da CSS Tricks

Back-end

  1. NodeJS tutorials da NodeSchool.io
  2. How I explained REST to my Wife
  3. Creating a Single Page Todo App with Node and Angular da Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bônus: recursos

Totalmente opcionais, mas alguns dos meus artigos e recursos favoritos que encontrei com o passar dos anos que, acredito, serão do seu agrado se estiver interessado no assunto específico.

  • Web Design in 4 minutes. Um tutorial muito criativo e original interactive que ensina o básico sobre design para a web.
  • Awwards. Procurando por inspiração para o design para a web? Os seus problemas acabaram.
  • Why Hiring is so hard in tech, de Eric Elliott. Aqui, Eric faz um trabalho incrível resumindo como é surpreendentemente difícil encontrar desenvolvedores ótimos e dá dicas de como se tornar um deles.
  • NoSQL database systems mega comparison, de Kristof Kovacs. Uma comparação incrível entre os sistemas de bancos de dados NoSQL mais populares: MongoDB, Redis, CouchDB, Cassandra, ElasticSearch e muito mais.
  • XSS Game. Bugs relacionados a cross-site scripting (XSS) são um dos tipos mais comuns e perigosos de vulnerabilidades nas aplicações para a web. Usando esse recurso sensacional, você pode aprender a encontrar e explorar os bugs de XSS, além de evitar que eles aconteçam em sua aplicação para a web.
  • How To Write Unmaintainable Code. Um artigo engraçadíssimo sobre como não escrever código limpo e de fácil manutenção.

Bônus: minhas ferramentas

Também achei que seria legal compartilhar algumas das ferramentas que descobri (umas bastante conhecidas; outras, nem tanto) que tornaram minha vida como desenvolvedor mais fácil.

  • Jetbrains Webstorm: IDE completo para o desenvolvimento para a web. (Meu editor favorito) É pago, mas oferece um ano de licença gratuita para estudantes.
  • Atom.io: Editor de texto altamente extensível, com recursos semelhantes aos de IDEs concorrentes, como o Webstorm. Gratuito.
  • Sublime Text: Editor de texto muito rápido, com suporte a plug-ins e muito bonito. (Normalmente, eu mantenho Webstorm/Atom instalados para o trabalho mais pesado e uso o Sublime Text para edições rápidas em arquivos.)
  • caniuse.com: Suporte aos navegadores é essencial para os sites da web. Esse é o recurso número 1 para descobrir quais recursos têm suporte em quais versões dos navegadores.
  • Cloud 9: Ambiente de desenvolvimento baseado em nuvem e IDE com suporte a Git que roda em Linux. Ótimo para programar remotamente e testar NodeJS ou outras coisas do lado do servidor sem precisar instalar nada em sua máquina.
  • CodePen, Plunker e JSFiddle: Ótimos playgrounds de front-end baseados em nuvem que permitem que você faça demonstrações rápidas de HTML/CSS/JS que você pode compartilhar ou trabalhar nelas mais tarde se criar uma conta gratuita. O CodePen é, muitas vezes, melhor para coisas relacionadas a CSS por causa de sua interface minimalista e infinidade de recursos relacionados a CSS, o Plunker para demonstrações do JavaScript por causa de seus poderosos recursos de JS e o JSFiddle para demonstrações em que você deseja colaborar com outras pessoas em tempo real, graças ao seu recurso de colaboração de compartilhamento de editor ao vivo.
  • Vanilla List: Um repositório de plug-ins e bibliotecas do JavaScript usando apenas JavaScript Vanilla (ou puro, o que significa que eles não exigem bibliotecas para funcionar, como o jQuery).
  • YouMightNotNeedjQuery: Provavelmente, não. Descubra você mesmo.
  • PublicAPIs: Já se perguntou quais APIs existem por aí? Este é um ótimo lugar para descobrir!
  • Gravit.io: Aplicativo de design baseado em nuvem rivalizando com o Adobe Illustrator. (Gratuito!) Útil para maquetes rápidas e design para a web.
  • Adobe Kuler: Webapp para ajudá-lo a criar combinações de cores harmoniosas para qualquer site. Também tem uma parte chamada "Explore", de paletas de cores criadas por outros designers, bem como um sistema de classificação para ajudar a inspirá-lo.
  • Name that color: Pare de gastar seu tempo descobrindo como nomear suas variáveis de cor em Less/Sass e apenas use o nome legítimo das cores com este webapp.

Conclusão

Eu só gostaria de dizer que realmente gostei de escrever isso. Fico muito feliz por finalmente ter sido capaz de dar algo de volta à comunidade de programação incrivelmente solidária em todos os lugares.

Como alguns de vocês já perceberam, este é o meu primeiro artigo, mas podem ter certeza de que pretendo escrever mais. Só não espere um por semana. Lembre-se: qualidade sobre quantidade!

Espero que este artigo tenha sido útil para vocês. Até a próxima vez! Um abraço!

Para os curiosos sobre o que o autor vem fazendo, acompanhe seu blog no Medium!