Imparare a programmare scrivendo poesie sul codice

Nel 2008, ho iniziato a studiare design e ricordo chiaramente come la semplice vista del codice mi intimidisse. Ho avuto alcune lezioni di programmazione e, senza alcuna precedente esperienza di programmazione, ho avuto difficoltà a capire il codice con cui sono entrato in contatto per la prima volta. Improvvisamente, le parole a cui ero abituato nella lingua inglese (come "new", "return" e "throw/catch") hanno assunto un significato completamente nuovo; la sintassi criptica, i punti e virgola, le parentesi e le regole completamente nuove non mi hanno reso le cose più facili.

Se non conosci JavaScript e/o hai difficoltà ad aggiungerlo al tuo set di competenze, potrei avere un approccio per te per superare queste barriere. Sicuramente non sei solo e hai tutto il diritto di pensare che imparare a programmare sia un osso duro da decifrare.

Perché imparare a programmare è così difficile?

Ecco alcune delle idee sbagliate sul motivo per cui penso che le persone abbiano difficoltà a imparare o ad interessarsi a JavaScript (o a qualsiasi linguaggio di codifica):

• Il codice è criptico, puramente funzionale e spaventoso;
• Il codice è pensato solo per le macchine, quindi le persone non si sentono indirizzate o coinvolte;
• Il codice non viene trattato come un linguaggio perché ha un caso d'uso completamente diverso e sembra molto diverso da qualsiasi cosa abbiano visto prima;
• Le persone pensano agli stereotipi (hacker malvagi, forse alcuni tizi di Matrix), e quindi non si identificano con essi.
  

Come sviluppatore, ci si aspetta che tratti il ​​codice in un modo molto specifico, anche per pensare in un modo abbastanza diverso (e altamente logico). I linguaggi di codifica sono piuttosto rigidi e intolleranti; un singolo carattere può impedire alla macchina di capire cosa intendi e causare il crash delle applicazioni. Ci si aspetta che tu ignori e ignori alcune cose che conosci parlando e scrivendo una lingua umana (che è, tra l'altro, anche il caso dell'apprendimento di una nuova lingua umana).

Ma non tutti i linguaggi di programmazione, le documentazioni o i video tutorial sul web sono realizzati tenendo presente questa "transizione da uomo a linguaggio di programmazione". Certo, non devono. Dopotutto, lo scopo principale del codice è dire alle macchine cosa fare.

Tuttavia, proprio per questo scopo, manca semplicemente una possibilità di confronto e le lingue che parli (vocabolario e regole) sembrano essere rese inutili per l'apprendimento di un linguaggio di programmazione. Non esiste una parola per "amore" nel linguaggio JavaScript , né ha senso dire "ti amo". Una macchina (o un browser) semplicemente non conosce o non si preoccupa dell'amore (ancora?). Questa sensazione "completamente nuova" e "non so da dove cominciare" può essere spaventosa da morire.

Questo è il motivo per cui sono qui. Penso che tu possa imparare JavaScript in un modo molto più semplice e artistico, mantenendo la tua conoscenza del linguaggio umano e trattando JavaScript come qualsiasi altro linguaggio umano. Lasciate che vi dimostri con un piccolo esempio.

Curiosità : alcuni linguaggi di programmazione hanno effettivamente in mente il passaggio da un linguaggio di programmazione a un altro. Questo è il motivo per cui è molto più facile imparare molti linguaggi di programmazione, solo imparandone uno solo.

Un piccolo esempio

In molti casi, quando si desidera eseguire codice JavaScript, si desidera che il "documento" (in pratica il sito Web, un utente scarica ad ogni visita) sia pronto in modo da poter interagire con gli elementi HTML, ad esempio. In puro JavaScript, potresti inciampare in qualcosa di questo:

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

(Che schifo! In questo caso, una funzione è definita tra parentesi e quindi chiamata immediatamente con un'altra coppia di parentesi alla fine. Questo è indicato come IIFE.)

O a volte così:

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

Il primo frammento richiede sicuramente una spiegazione, mentre con il secondo (e forse un po' di fantasia) si potrebbe comprendere che c'è una condizione che deve essere soddisfatta affinché qualcos'altro accada solo guardandolo.

Immagina qualcosa del genere, però:

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

“C'era una volta” è qualcosa (oserei dire) che anche un bambino potrebbe capire. Si rivolge allo sviluppatore (riferendosi ai ricordi d'infanzia), mentre teoricamente fa la stessa cosa. Questo è ciò che considero "avere in mente la transizione da umano a linguaggio di programmazione".

Breve nota sulle "funzioni ": una funzione è fondamentalmente un'abilità, che è inattiva finché non la si richiama. "Leggere" è una function read() { … } , che viene chiamata quando si desidera leggere qualcosa del genere: read() . C'è anche qualcosa chiamato "funzioni anonime", cioè "function() { … } (non ha nome, come negli snippet sopra) che sono fondamentalmente "azioni occasionali / casuali" che non considereresti un'abilità , ad esempio "per premere un pulsante".

Girare le carte in tavola: dal messaggio alle basi

Quindi portiamo questa idea un po' più in là. Prendiamo le ragioni e le idee sbagliate di cui sopra e capovolgiamole:

Una piccola poesia.

Scritto in JavaScript.

Fatto per gli esseri umani.

Sull'amore tra due individui.

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

Non è funzionale. Attualmente non è pensato per le macchine. È pensato per farti leggere e capire.

Se hai ricevuto il messaggio della poesia, in realtà hai capito un pezzo di codice JavaScript, che potresti aver paragonato alla lingua inglese.

Ora potresti chiederti: questo lo capisco, ma perché è scritto così? Quali sono le regole (grammatica) di questa lingua? Qual è il significato di "me" (in senso tecnico) e perché questo codice sembra così simile all'inglese?

Regole, vocabolario e variabili

Una delle cose più importanti da capire quando si impara un linguaggio di programmazione è il concetto di variabili .

Ogni lingua umana ha le sue regole (grammatica) e molto vocabolario (predefinito). Ovviamente, entrambi devono prima essere appresi per poter parlare la lingua.

JavaScript, come molti altri linguaggi di programmazione, viene fornito con il proprio insieme di regole (ad es. il . tra le parole o how if vengono scritte le istruzioni) e il proprio vocabolario ( if , document , window , Event e così via). Queste parole chiave sono riservate (o 'predefinite') da JavaScript (e dal browser) e ognuna di esse ha il suo scopo specifico.

Ma come ho detto prima, sembra che manchi la possibilità di confrontare le parole e le frasi che conosci dalla lingua inglese perché non ci sono equivalenti .

È qui che entrano in gioco le variabili; tu (lo sviluppatore) puoi (o addirittura devi) definire le variabili per far capire alle macchine e agli sviluppatori cosa significa qualcosa. Le variabili possono assumere molte forme (da cui il nome): possono essere una catena di parole e lettere (stringhe), un numero, un'azione (funzione) o anche una raccolta (array). Lo chiami.

In tutte le lingue c'è probabilmente una parola per amore. Sai cosa significa, ma non proprio, perché è così soggettivo. Ma ancora, c'è una parola per questo.

Ma in JavaScript, non c'è "amore", finché non dici che c'è. Può essere qualunque cosa tu voglia che sia.

 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 = { colore: 'viola', durata: 'per sempre', amoreTarget: 'cani', };
 // anche un'espressione variabile, dove love2 (una costante), // non può essere ridefinita / sovrascritta completamente: // love2 = undefined; // => non funzionerà
 // ("undefined" è una parola chiave javascript predefinita, // in pratica dice "non ha valore")

È fondamentale essere in grado di distinguere tra ciò che è predefinito in JavaScript (regole e vocabolario JavaScript) e ciò che è effettivamente definito in modo personalizzato dallo sviluppatore (noto anche come "logica dell'applicazione" o "logica aziendale").

Tornando alla poesia scritta sopra:

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

Queste espressioni provengono dal seguente vocabolario/set di regole 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 esempio più grande: poesia del codice interattivo

È così che è nato il mio progetto personale LoveBits. LoveBits è un'esperienza di apprendimento del codice/storytelling.

Cerca di attirare le persone interessate a JavaScript/codifica tramite:

• Mettere al primo posto la leggibilità e il linguaggio umano;
• Combinare il codice con un'arte con cui il lettore potrebbe già avere familiarità.

Dal punto di vista della storia, si tratta di due Bit (esseri rettangolari); uno dei Bit (blueBit) è quello romantico e scrive poesie d'amore JavaScript sull'altro Bit (purpleBit).

Quando avvii LoveBits, puoi selezionare una delle molteplici poesie d'amore (scritte in JavaScript). Ogni poesia ha un frammento di codice che è scritto in un modo che dovrebbe essere compreso da persone che non hanno nemmeno familiarità con la programmazione. L'unico requisito è la lingua inglese.

"Amore a prima vista" (in realtà una delle poesie di LoveBits), ad esempio, parla di questi due bit in cui il blueBit dice fondamentalmente: "Se mi avvicino abbastanza alla tua posizione, 'impostano i miei sentimenti' su inLove: true ”.

La cosa speciale di queste poesie è che puoi "eseguirle" o "suonarle" semplicemente premendo il pulsante "riproduci" in basso. Nel caso di "Amore a prima vista", vedresti un rettangolo blu e viola insieme a un numero. Come avrai già intuito, quelli sono i due Bit menzionati nella poesia, e il numero sotto il blueBit è in realtà la distanza tra il blueBit e il purpleBit.

Come suggerisce la poesia, potresti voler far innamorare il blueBit del purpleBit riducendo la distanza tra loro, giusto? Che cosa si può fare? Puoi interagire e trascinare il blueBit in giro e farlo innamorare. Ma attenzione, a volte c'è più di un solo risultato.

Si potrebbe davvero dire che tu sei la macchina qui. Sei tu quello che ha bisogno di interpretare il codice JavaScript per poter agire e aiutare due esseri digitali ad innamorarsi.

Dove andare da qui?

Se sei uno sviluppatore in difficoltà, prova a trattare JavaScript come un linguaggio umano e capisci solo cosa dovrebbero fare prima i frammenti di codice invece di quello che effettivamente finiscono per fare.

Questo è ciò che ti consiglierei di fare dopo:

• Preferisci sempre andare direttamente per esempi e codice per intere applicazioni che combinano regole, vocabolario e variabili insieme per formare una logica dell'applicazione;
• La logica dell'applicazione racconterà le storie che ti aiuteranno a colmare le lacune come negli esempi di codice sopra. Le librerie di codice e le utilità come lodash ti forniranno solo un nuovo vocabolario che diventerà utile dopo essere stato in grado di leggere e comprendere il codice JavaScript;
• Esamina il codice esistente e prova a scomporlo in piccole funzioni con nomi che riflettano ciò che fanno. Scrivi un codice che si rivolga a uomini e macchine allo stesso modo. Scrivi il codice in modo tale che possa essere letto come una frase. Usa i commenti dove necessario. Pensa: come potrei esprimerlo in un linguaggio umano (a un altro sviluppatore)?

Conclusione

Imparare a programmare può diventare più facile una volta che inizi a trattare il codice come un linguaggio umano e non come qualcosa che gli alieni potrebbero aver inventato. Imparare a distinguere tra funzionalità del linguaggio (integrate) e variabili/codice personalizzato per la logica dell'applicazione è fondamentale. Essere in grado di comprendere la logica dell'applicazione ti metterà in una posizione di forza per migliorare e cambiare le cose, senza nemmeno conoscere le funzionalità del linguaggio.

Messaggio prima delle basi : comprendi il messaggio di qualsiasi frammento di codice e le basi di JavaScript seguiranno naturalmente. Quante volte hai sentito qualcuno dire: “Capisco la lingua, ma non la parlo ancora”? È un processo naturale, che può e forse dovrebbe essere applicato per l'apprendimento dei linguaggi sia umani che di programmazione.

Inoltre, tieni sempre presente che il codice ha un chiaro scopo funzionale, ma non deve essere sempre così. Anche i linguaggi umani una volta erano puramente funzionali, ma poi sono arrivate poesie e persino canzoni (canzoni JavaScript, qualcuno?), Che collegavano le persone in modi completamente diversi. Penso, o spero, che lo stesso possa valere qui.

Esplora sempre i progetti di codice e magari prova anche a scrivere tu stesso una poesia (magari anche in un altro linguaggio di programmazione che conosci)? Mi è piaciuto creare il progetto LoveBits e mi piacerebbe vedere alcune delle tue idee nei commenti qui sotto!

Ulteriori letture

• "Se Hemingway ha scritto JavaScript", Angus Croll
  Questo è uno dei miei libri preferiti in cui mi sono davvero imbattuto dopo LoveBits. Riguarda diversi poeti e artisti famosi e come avrebbero scritto frammenti di codice JavaScript. È divertente!