Învățați să codificați scriind poezii de cod

În 2008, am început să studiez design și îmi amintesc clar cum m-a intimidat vederea simplă a codului. Am avut câteva cursuri de codare și, fără nicio experiență anterioară de codare, mi-a fost greu să înțeleg codul cu care am luat legătura pentru prima dată. Dintr-o dată, cuvintele cu care eram obișnuit în limba engleză (cum ar fi „nou”, „return” și „throw/catch”) au căpătat un sens cu totul nou; sintaxa criptică, punctele și virgulă, parantezele și regulile complet noi nu mi-au ușurat lucrurile.

Dacă sunteți nou în JavaScript și/sau aveți dificultăți în adăugarea acestuia la setul dvs. de abilități, s-ar putea să am o abordare pentru a depăși aceste bariere. Cu siguranță nu sunteți singuri și aveți tot dreptul să credeți că a învăța să codificați este o nucă greu de spart.

De ce este atât de greu să înveți codificarea?

Iată câteva dintre concepțiile greșite despre motivul pentru care cred că oamenilor le este greu să învețe sau să se intereseze de JavaScript (sau orice limbaj de codare):

• Codul este criptic, pur funcțional și înfricoșător;
• Codul este destinat numai mașinilor, astfel încât oamenii să nu se simtă adresați sau implicați;
• Codul nu este tratat ca o limbă deoarece are un caz de utilizare complet diferit și arată foarte diferit de orice au văzut înainte;
• Oamenii se gândesc la stereotipuri (hackeri răi, poate niște tipi Matrix) și astfel nu se identifică cu ele.
  

În calitate de dezvoltator, trebuie să tratați codul într-un mod foarte specific - chiar și să gândiți într-un mod destul de diferit (și foarte logic). Limbile de codificare sunt destul de stricte și intolerante; un singur caracter poate face ca mașina să nu înțeleagă ce vrei să spui și poate face ca aplicațiile să se blocheze. Trebuie să ignorați și să treceți peste anumite lucruri pe care le cunoașteți din vorbirea și scrierea unei limbi umane (ceea ce, apropo, este și cazul când învățați o nouă limbă umană).

Dar nu toate limbajele de programare, documentațiile sau tutorialele video de pe web sunt realizate având în vedere această „tranziție de la om la limbajul de programare”. Desigur, nu trebuie. La urma urmei, scopul principal al codului este de a spune mașinilor ce să facă.

Totuși, datorită acestui scop, pur și simplu lipsește o șansă de comparație, iar limbile pe care le vorbiți (vocabular și reguli) par a fi făcute inutile pentru învățarea unui limbaj de programare. Nu există niciun cuvânt pentru „dragoste” în limbajul JavaScript și nici nu are sens să spui „Te iubesc”. O mașină (sau browser) pur și simplu nu știe sau îi pasă de dragoste (încă?). Acest sentiment „complet nou” și „nu știu de unde să încep” poate fi înfricoșător.

Acesta este motivul pentru care sunt aici. Cred că puteți învăța JavaScript într-un mod mult mai ușor și artistic, păstrând cunoștințele dvs. de limbaj uman și tratând JavaScript ca orice altă limbă umană. Permiteți-mi să demonstrez cu un mic exemplu.

Fapt distractiv : Unele limbaje de programare au în vedere trecerea de la un limbaj de programare la altul. Acesta este motivul pentru care este mult mai ușor să înveți o mulțime de limbaje de programare — doar învățând unul singur.

Un mic exemplu

În multe cazuri, când doriți să executați cod JavaScript, doriți ca „documentul” (practic site-ul web, pe care un utilizator îl descarcă la fiecare vizită) să fie gata, astfel încât să puteți interacționa cu elemente HTML, de exemplu. În JavaScript pur, s-ar putea să dai peste ceva asta:

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

(Pana! În acest caz, o funcție este definită între paranteze și apoi imediat apelată cu o altă pereche de paranteze la sfârșit. Aceasta este denumită IIFE.)

Sau uneori astfel:

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

Primul fragment necesită cu siguranță o explicație, în timp ce cu al doilea (și poate o fantezie), s-ar putea înțelege că există o condiție care trebuie îndeplinită pentru ca altceva să se întâmple doar doar privind.

Imaginați-vă totuși ceva de genul acesta:

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

„A fost odată ca niciodată” este ceva (îndrăznesc să spun) chiar și un copil ar putea înțelege. Se adresează dezvoltatorului (prin referire la amintirile din copilărie), în timp ce, teoretic, face același lucru. Acesta este ceea ce consider „a avea în vedere tranziția umană la limbajul de codare”.

Notă rapidă despre „funcții ”: o funcție este, în principiu, o abilitate, care rămâne latentă până când o apelați. „A citi” este o function read() { … } , care este apelată atunci când doriți să citiți ceva de genul acesta: read() . Există, de asemenea, ceva numit „funcții anonime”, adică "function() { … } (nu are nume, ca în fragmentele de mai sus) care sunt practic „acțiuni ocazionale / ocazionale” pe care nu le-ați considera a fi o abilitate , cum ar fi „a apăsa un buton”.

Întoarcerea situației: de la mesaj la elementele de bază

Deci, să ducem această idee puțin mai departe. Să luăm motivele și concepțiile greșite de mai sus și să le întoarcem cu susul în jos:

Un mic poem.

Scris în JavaScript.

Făcut pentru ființe umane.

Despre dragostea dintre doi indivizi.

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

Nu este funcțional. În prezent nu este destinat mașinilor. Este menit să citiți și să înțelegeți.

Dacă ai primit mesajul poeziei, ai înțeles de fapt o bucată de cod JavaScript, pe care s-ar putea să-l fi comparat cu limba engleză.

Acum s-ar putea să vă întrebați: înțeleg asta, dar de ce este scris așa? Care sunt regulile (gramatica) acestei limbi? Care este sensul cuvântului „eu” (în sens tehnic) și de ce acest cod arată atât de asemănător cu engleza?

Reguli, vocabular și variabile

Unul dintre cele mai importante lucruri de înțeles atunci când învățați un limbaj de programare este conceptul de variabile .

Fiecare limbă umană are regulile sale (gramatica) și mult vocabular (predefinit). Evident, ambele trebuie mai întâi învățate pentru a putea vorbi limba.

JavaScript, la fel ca multe alte limbaje de programare, vine, de asemenea, cu propriul set de reguli (de exemplu, . între cuvinte sau how if sunt scrise declarații) și propriul vocabular ( if , document , window , Event și așa mai departe). Aceste cuvinte cheie sunt rezervate (sau „predefinite”) de JavaScript (și de browser), și fiecare dintre ele are scopul său specific.

Dar, așa cum am menționat mai devreme, se pare că lipsește o șansă de a compara cuvintele și propozițiile pe care le cunoașteți din limba engleză, deoarece nu există echivalente .

Aici intervin variabilele; tu (dezvoltatorul) poți (sau chiar trebuie să) să definești variabilele pentru a face mașinile și dezvoltatorii să înțeleagă ce înseamnă ceva. Variabilele pot lua o mulțime de forme (de unde și numele): pot fi un lanț de cuvinte și litere (șiruri), un număr, o acțiune (funcție) sau chiar o colecție (matrice). Numiți.

În toate limbile, există probabil un cuvânt pentru dragoste. Știi cam ce înseamnă, dar nu chiar, pentru că este atât de subiectiv. Dar totuși, există un cuvânt pentru asta.

Dar în JavaScript, nu există „dragoste”, până când nu spui că există. Poate fi orice vrei tu să fie.

 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 dragoste2 = { culoare: „violet”, durată: „pentru totdeauna”, dragosteTarget: „câini”, };
 // de asemenea o expresie variabilă, unde dragoste2 (o constantă), // nu poate fi redefinită / suprascrisă complet: // dragoste2 = nedefinit; // => nu va funcționa
 // („nedefinit” este un cuvânt cheie javascript predefinit, // spunând practic „nu are valoare”)

Este esențial să poți face distincția între ceea ce este predefinit în JavaScript (reguli și vocabular JavaScript) și ceea ce este definit personalizat de către dezvoltator (cunoscut și ca „logica aplicației” sau „logica de afaceri”).

Revenind la poezia scrisă mai sus:

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

Aceste expresii provin din următorul vocabular/setul de reguli 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, }); }

Un exemplu mai mare: Poezia codului interactiv

Așa a apărut proiectul meu personal LoveBits. LoveBits este o experiență de învățare a codurilor/povestire.

Încearcă să îi intereseze pe oameni de JavaScript/codare prin:

• Punând pe primul loc lizibilitatea și limbajul uman;
• Combinarea codului cu o artă cu care cititorul ar putea fi deja familiarizat.

Din punct de vedere al poveștii, este vorba despre doi biți (ființe dreptunghiulare); unul dintre Biți (blueBit) este cel romantic și îi scrie poezii de dragoste JavaScript celuilalt Bit (purpleBit).

Când porniți LoveBits, puteți selecta una dintre multiplele poezii de dragoste (scrise în JavaScript). Fiecare poezie are un fragment de cod care este scris într-un mod care ar trebui să fie înțeles de oameni care nici măcar nu sunt familiarizați cu programarea. Singura cerință este limba engleză.

„Dragoste la prima vedere” (de fapt, una dintre poeziile LoveBits), de exemplu, este despre aceste două biți în care blueBit spune practic: „Dacă mă apropii suficient de poziția ta, îmi voi „seta sentimentele” la inLove: true .”

Lucrul special la aceste poezii este însă că le puteți „rula” sau „reda” pur și simplu apăsând butonul „redare” de mai jos. În cazul „Dragoste la prima vedere”, veți vedea un dreptunghi albastru și violet împreună cu un număr. După cum probabil ați ghicit deja, aceștia sunt cei doi biți menționați în poem, iar numărul de sub blueBit este de fapt distanța dintre blueBit și purpleBit.

După cum sugerează poemul, poate doriți să-l faceți pe blueBit să se îndrăgostească de purpleBit reducând distanța dintre ele, nu? Deci ce poți face? Puteți interacționa și trage blueBit în jur și îl puteți îndrăgosti. Dar fii atent, uneori există mai mult decât un singur rezultat.

S-ar putea spune de fapt că tu ești mașina aici. Tu ești cel care trebuie să interpreteze codul JavaScript pentru a putea acționa și a ajuta două ființe digitale să se îndrăgostească.

Unde să mergi de aici?

Dacă sunteți un dezvoltator care se luptă, încercați să tratați JavaScript ca pe un limbaj uman și să înțelegeți ce ar trebui să facă mai întâi fragmentele de cod, în loc de ceea ce ajung să facă de fapt.

Iată ce ți-aș recomanda să faci în continuare:

• Preferați întotdeauna să căutați exemple și coduri pentru aplicații întregi care combină reguli, vocabular și variabile împreună pentru a forma o logică a aplicației;
• Logica aplicației va spune poveștile care vă vor ajuta să umpleți golurile ca în exemplele de cod de mai sus. Bibliotecile de coduri și utilitare precum lodash vor oferi doar vocabular nou care va deveni util după ce veți putea citi și înțelege codul JavaScript;
• Examinați codul existent și încercați să-l descompuneți în mici funcții cu nume care reflectă ceea ce fac. Scrieți cod care se adresează atât oamenilor, cât și mașinilor. Scrieți codul în așa fel încât să poată fi citit ca o propoziție. Folosiți comentarii oriunde este necesar. Gândiți-vă: cum aș exprima acest lucru într-un limbaj uman (către alt dezvoltator)?

Concluzie

Învățarea codului poate deveni mai ușoară odată ce începi să tratezi codul ca pe un limbaj uman și nu ca pe ceva ce extratereștrii ar fi inventat. Învățarea să distingă între caracteristicile limbajului (încorporate) și variabile/codul personalizat pentru logica aplicației este crucială. A fi capabil să înțelegeți logica aplicației vă va pune într-o poziție puternică de a îmbunătăți și schimba lucrurile, fără să cunoașteți măcar caracteristicile lingvistice.

Mesaj înainte de elementele de bază : înțelegeți mesajul oricărui fragment de cod și elementele de bază ale JavaScript vor urma în mod natural. De câte ori ați auzit pe cineva spunând: „Înțeleg limba, dar nu o vorbesc încă”? Este un proces natural, care poate și poate ar trebui aplicat atât pentru învățarea limbajelor umane, cât și a limbajelor de codare.

De asemenea, rețineți întotdeauna că codul are un scop funcțional clar, dar nu trebuie să fie întotdeauna așa. Chiar și limbajele umane au fost odată pur funcționale, dar apoi au apărut poezii și chiar cântece (melodii JavaScript, cineva?), care legau oamenii în moduri complet diferite. Cred sau sper că la fel se poate aplica și aici.

Explorați întotdeauna proiecte de cod și poate chiar încercați să scrieți singur o poezie (poate chiar într-un alt limbaj de programare cu care sunteți familiarizat)? Mi-a plăcut să creez proiectul LoveBits și mi-ar plăcea să văd câteva dintre ideile tale în comentariile de mai jos!

Lectură suplimentară

• „Dacă Hemingway a scris JavaScript”, Angus Croll
  Aceasta este una dintre cărțile mele preferate în care am dat de fapt după LoveBits. Este vorba despre câțiva poeți și artiști celebri și despre cum ar fi scris fragmente de cod JavaScript. Este hilar!