Aprendendo a codificar escrevendo poemas de código

Em 2008, comecei a estudar design e lembro claramente como a simples visão do código me intimidava. Eu tive algumas aulas de codificação e, sem nenhuma experiência anterior em codificação, tive dificuldade em entender o código com o qual entrei em contato. De repente, as palavras que eu estava acostumado na língua inglesa (como “new”, “return” e “throw/catch”) ganharam um significado totalmente novo; a sintaxe enigmática, ponto e vírgula, colchetes e regras completamente novas não facilitaram as coisas para mim.

Se você é novo em JavaScript e/ou tem dificuldades para adicioná-lo ao seu conjunto de habilidades, posso ter uma abordagem para você superar essas barreiras. Você definitivamente não está sozinho e tem todo o direito de pensar que aprender a codificar é um osso duro de roer.

Por que aprender a codificar é tão difícil?

Aqui estão alguns dos equívocos sobre por que eu acho que as pessoas estão tendo dificuldade em aprender ou se interessar por JavaScript (ou qualquer linguagem de codificação):

• O código é enigmático, puramente funcional e assustador;
• O código destina-se apenas a máquinas, para que as pessoas não se sintam abordadas ou engajadas;
• O código não é tratado como uma linguagem porque tem um caso de uso completamente diferente e parece muito diferente de tudo o que eles viram antes;
• As pessoas pensam em estereótipos (hackers malvados, talvez alguns caras do Matrix) e, portanto, não se identificam com isso.
  

Como desenvolvedor, espera-se que você trate o código de uma maneira muito específica – até mesmo pense de uma maneira bem diferente (e altamente lógica). As linguagens de codificação são bastante rígidas e intolerantes; um único caractere pode fazer a máquina não entender o que você quer dizer e fazer os aplicativos travarem. Espera-se que você ignore e substitua certas coisas que sabe ao falar e escrever uma linguagem humana (o que, aliás, também é o caso ao aprender uma nova linguagem humana).

Mas nem todas as linguagens de programação, documentações ou tutoriais em vídeo na web são feitos com essa “transição de humano para linguagem de programação” em mente. Claro, eles não precisam. Afinal, o principal objetivo do código é dizer às máquinas o que fazer.

Ainda assim, devido a esse propósito, simplesmente falta uma chance de comparação e as linguagens que você fala (vocabulário e regras) parecem ser inúteis para aprender uma linguagem de programação. Não há palavra para “amor” na linguagem JavaScript , nem faz sentido dizer “eu te amo”. Uma máquina (ou navegador) simplesmente não conhece ou não se importa com o amor (ainda?). Esse sentimento de “completamente novo” e “não sei por onde começar” pode ser assustador como o inferno.

É por isso que estou aqui. Eu acho que você pode aprender JavaScript de uma maneira muito mais fácil e artística, mantendo seu conhecimento de linguagem humana e tratando JavaScript como qualquer outra linguagem humana. Deixe-me demonstrar com um pequeno exemplo.

Curiosidade : Algumas linguagens de programação realmente têm em mente a transição de uma linguagem de programação para outra. É por isso que é muito mais fácil aprender muitas linguagens de programação – apenas aprendendo uma única.

Um pequeno exemplo

Em muitos casos, quando você deseja executar o código JavaScript, deseja que o “documento” (basicamente o site, que um usuário está baixando a cada visita) esteja pronto para que você possa interagir com elementos HTML, por exemplo. Em JavaScript puro, você pode tropeçar em algo assim:

 (function() { // Your code goes here })();

(Eca! Nesse caso, uma função é definida entre colchetes e imediatamente chamada com outro par de colchetes no final. Isso é chamado de IIFE.)

Ou às vezes assim:

 if (document.readyState === 'complete') { // Your code goes here }

O primeiro trecho definitivamente requer uma explicação, enquanto com o segundo (e talvez alguma fantasia), pode-se compreender que há uma condição que precisa ser cumprida para que algo mais aconteça apenas olhando para ele.

Mas imagine algo assim:

 onceUponATime(function () { // Your code (story) goes here })

“Era uma vez” é algo (ouso dizer) que até uma criança pode entender. Ele aborda o desenvolvedor (referindo-se às memórias da infância), enquanto teoricamente faz a mesma coisa. Isso é o que eu considero “ter a transição humana para a linguagem de codificação” em mente.

Nota rápida sobre “funções ”: Uma função é basicamente uma habilidade, que fica inativa até que você a chame. “To read” é uma function read() { … } , que é chamada quando você deseja ler algo assim: read() . Há também algo chamado “funções anônimas”, ou seja, "function() { … } (não tem nome, como nos trechos acima) que são basicamente “ações únicas / casuais” que você não consideraria uma habilidade , como “apertar um botão”.

Virando a mesa: da mensagem ao básico

Então, vamos levar essa ideia um pouco mais longe. Vamos pegar as razões e equívocos acima e transformá-los de cabeça para baixo:

Um pequeno poema.

Escrito em JavaScript.

Feito para seres humanos.

Sobre o amor entre dois indivíduos.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Não é funcional. Atualmente não é destinado a máquinas. É para você ler e entender.

Se você entendeu a mensagem do poema, você realmente entendeu um pedaço de código JavaScript, que você pode ter comparado ao idioma inglês.

Agora você pode se perguntar: eu entendo isso, mas por que está escrito assim? Quais são as regras (gramática) dessa linguagem? Qual é o significado de “me” (no sentido técnico) e por que esse código é tão parecido com o inglês?

Regras, vocabulário e variáveis

Uma das coisas mais importantes para entender ao aprender uma linguagem de programação é o conceito de variáveis .

Toda linguagem humana tem suas regras (gramática) e muito vocabulário (pré-definido). Obviamente, ambos precisam ser aprendidos primeiro para poder falar o idioma.

JavaScript, como muitas outras linguagens de programação, também vem com seu próprio conjunto de regras (por exemplo, o . entre as palavras if como as instruções são escritas) e seu próprio vocabulário ( if , document , window , Event e assim por diante). Essas palavras-chave são reservadas (ou 'pré-definidas') pelo JavaScript (e pelo navegador), e cada uma delas tem sua finalidade específica.

Mas, como mencionei anteriormente, a chance de comparar as palavras e frases que você conhece do idioma inglês parece estar faltando porque não há equivalentes .

É aqui que entram as variáveis; você (o desenvolvedor) pode (ou mesmo ter que) definir as variáveis ​​para que as máquinas e os desenvolvedores entendam o que algo significa. As variáveis ​​podem assumir muitas formas (daí o nome): podem ser uma cadeia de palavras e letras (strings), um número, uma ação (função) ou até mesmo uma coleção (array). O que você disser.

Em todas as línguas, provavelmente existe uma palavra para amor. Você meio que sabe o que isso significa, mas não realmente, porque é muito subjetivo. Mas ainda assim, há uma palavra para isso.

Mas em JavaScript, não existe “amor”, até que você diga que existe. Pode ser o que você quiser.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = { color: 'roxo', duração: 'para sempre', loveTarget: 'cachorros', };
 // também uma expressão variável, onde love2 (uma constante), // não pode ser redefinida / substituída completamente: // love2 = undefined; // => não vai funcionar
 // (“undefined” é uma palavra-chave javascript pré-definida, // basicamente dizendo “não tem valor”)

É crucial poder distinguir entre o que é pré-definido em JavaScript (regras e vocabulário JavaScript) e o que é realmente definido pelo desenvolvedor (também conhecido como 'lógica de aplicativo' ou 'lógica de negócios').

Voltando ao poema escrito acima:

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Essas expressões vêm do seguinte vocabulário/conjunto de regras JavaScript:

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Um Exemplo Maior: Poesia de Código Interativa

Foi assim que meu projeto pessoal LoveBits surgiu. LoveBits é uma experiência de aprendizado de código/contação de histórias.

Ele tenta fazer com que as pessoas se interessem por JavaScript/codificação por:

• Colocar a legibilidade e a linguagem humana em primeiro lugar;
• Combinando código com uma arte com a qual o leitor já deve estar familiarizado.

Em termos de história, trata-se de dois Bits (seres retangulares); um dos Bits (blueBit) é o romântico e escreve poemas de amor em JavaScript para o outro Bit (purpleBit).

Ao iniciar o LoveBits, você pode selecionar um dos vários poemas de amor (escritos em JavaScript). Cada poema tem um trecho de código que é escrito de uma maneira que deve ser entendido por pessoas que nem estão familiarizadas com programação. O único requisito é o idioma inglês.

“Amor à primeira vista” (na verdade um dos poemas de LoveBits), por exemplo, é sobre esses dois Bits em que o blueBit basicamente diz: “Se eu chegar perto o suficiente da sua posição, vou 'definir meus sentimentos' para inLove: true .”

A coisa especial sobre esses poemas, porém, é que você pode "executar" ou "reproduzir" simplesmente pressionando o botão "reproduzir" abaixo. No caso de “Amor à primeira vista”, você veria um retângulo azul e roxo junto com um número. Como você já deve ter adivinhado, esses são os dois Bits mencionados no poema, e o número abaixo do blueBit é na verdade a distância entre o blueBit e o purpleBit.

Como o poema sugere, você pode querer fazer o blueBit se apaixonar pelo purpleBit reduzindo a distância entre eles, certo? Então o que você pode fazer? Você pode interagir e arrastar o blueBit, e fazer com que ele se apaixone. Mas tenha cuidado, às vezes há mais de um resultado.

Pode-se dizer que você é a máquina aqui. Você é quem precisa interpretar o código JavaScript para poder agir e ajudar dois seres digitais a se apaixonarem.

Onde ir a partir daqui?

Se você é um desenvolvedor com dificuldades, tente tratar o JavaScript como uma linguagem humana e apenas entenda o que os snippets de código devem fazer primeiro, em vez do que eles realmente acabam fazendo.

Isto é o que eu recomendo que você faça a seguir:

• Sempre prefira ir direto para exemplos e código para aplicativos inteiros que combinam regras, vocabulário e variáveis ​​juntos para formar uma lógica de aplicativo;
• A lógica do aplicativo contará as histórias que o ajudarão a preencher as lacunas, como nos exemplos de código acima. Bibliotecas de código e utilitários, como o lodash , só fornecerão um novo vocabulário que se tornará útil depois de ser capaz de ler e entender o código JavaScript;
• Revise o código existente e tente dividi-lo em pequenas funções com nomes que reflitam o que elas fazem. Escreva código que aborde humanos e máquinas igualmente. Escreva o código de forma que possa ser lido como uma frase. Use comentários sempre que necessário. Pense em: Como eu expressaria isso em uma linguagem humana (para outro desenvolvedor)?

Conclusão

Aprender a codificar pode se tornar mais fácil quando você começa a tratar o código como uma linguagem humana e não como algo que os alienígenas possam ter inventado. Aprender a distinguir entre recursos de linguagem (integrados) e variáveis/código personalizado para a lógica do aplicativo é crucial. Ser capaz de entender a lógica do aplicativo o colocará em uma posição poderosa para melhorar e mudar as coisas, mesmo sem conhecer os recursos da linguagem.

Mensagem antes do básico : entenda a mensagem de qualquer trecho de código e o básico do JavaScript seguirá naturalmente. Quantas vezes você já ouviu alguém dizer: “Eu entendo a língua, mas ainda não a falo”? É um processo natural, que pode e talvez deva ser aplicado para aprender linguagens humanas e de codificação.

Além disso, sempre tenha em mente que o código tem um propósito funcional claro, mas nem sempre precisa ser assim. Até as linguagens humanas já foram puramente funcionais, mas depois surgiram poemas e até músicas (músicas JavaScript, alguém?), que conectavam as pessoas de maneiras totalmente diferentes. Acho, ou espero, que o mesmo se aplique aqui.

Sempre explore projetos de código e talvez até tente escrever um poema você mesmo (talvez até em outra linguagem de programação com a qual você esteja familiarizado)? Gostei de criar o projeto LoveBits e adoraria ver algumas de suas ideias nos comentários abaixo!

Leitura adicional

• “Se Hemingway escrevesse JavaScript”, Angus Croll
  Este é um dos meus livros favoritos que eu realmente tropecei depois de LoveBits. É sobre vários poetas e artistas famosos, e como eles teriam escrito trechos de código JavaScript. Isto é hilário!