Mentre lavori su un repository in Git, potresti avere necessità di estrarre uno specifico file da un branch e spostarlo in un altro branch (in gergo, eseguire il checkout di un file in un altro branch).

Fortunatamente, Git offre molti possibili modi per fare questa attività rapidamente. Una delle soluzioni più semplici è usare il comando git checkout con un file specifico come argomento.

In questo articolo, analizzeremo differenti soluzioni a questo problema e approfondiremo le procedura che dovrai seguire per ciascuna.

Partiamo! 😎.

Casi d'uso di git checkout

Stai lavorando su un branch, chiamato feature/A, contenente un file denominato utils.js.

Hai anche un altro branch, chiamato feature/B con un file aggiornato utils.js.

Vuoi effettuare il checkout di questo file e portarlo dal branch chiamato feature/B al branch chiamato feature/A.

Ci sono tre possibili soluzioni per questo compito.

Soluzione 1: Usare il comando git checkout

Il comando git checkout offre un modo semplice per prendere un file o una cartella da un altro branch.

Qui viene riportato il codice per eseguire il checkout di un file da un altro branch:

git checkout <nome-altro-branch> -- percorso/del/file/

Ecco la procedura da seguire:

1. Esegui il checkout del branch dove vuoi copiare il file.

git checkout feature/A

2. Una volta che sei nel branch corretto, copia il file.

git checkout feature/B -- utils.js

3. Usa il comando git status per assicurarti che il file sia stato copiato.

4. Esegui il commit e il push a un branch remoto.

Quando usi il comando checkout, puoi anche ottenere:

• Una cartella da un altro branch.
• File multipli specificando ciascuno di questi.

Inoltre, considera che puoi anche estrarre un file/cartella dallo stash.

Soluzione 2: Usa il comando git restore

Un'altra opzione è utilizzare il comando git switch insieme al comando git restore.

Se non hai mai sentito di questi due comandi, è tutto a posto. Sono relativamente nuovi. Git li ha introdotti nella versione 2.23 del 2019.

La funzione di questi due comandi è separare le responsabilità del comando git checkout per semplificarne l'utilizzo per gli utenti.

Il comando git restore ripristina l'albero di lavoro.

Il comando git switch passa da un branch all'altro.

Questa è la procedura da seguire per prendere un file da un altro branch:

1. Passa al branch dove vuoi inserire il file.

git switch feature/A

2. Prendi il file dall'altro branch.

git restore --source feature/B -- utils.js

3. Esegui il commit e il push dei cambiamenti.

Soluzione 3: Usa il comando git show

Per ultimo, possiamo usare il comando git show .

Qui è riportata la procedura da seguire:

1. Passa al branch di lavoro.

git switch feature/A

2. Prendi il file dall'altro branch

git show feature/B:path/utils.js > path/utils.js

3. Esegui il commit e il push dei cambiamenti.

Nota: questa volta devi specificare il percorso relativo dalla root della tua directory.

Considerazioni finali

Come puoi vedere, prendere un file da un altro branch non è così complicato.

Quando devo farlo nella mia vita di tutti i giorni, di solito uso il comando git checkout.

Visita il mio blog se sei interessato a scoprire di più su Git o sulle tecnologie usate nello sviluppo Web, come TypeScript.

Grazie per aver letto questo articolo.

Mentre realizzi un progetto, a volte potresti avere necessità di rinominare un branch locale. Ma come puoi farlo in Git?

In questo articolo, ti fornirò due metodi per rinominare i branch locali in Git.

Come rinominare un branch in Git – Metodo n° 1

Step 1: assicurati di essere nella cartella root del tuo progetto

Per prima cosa dovrai aprire il tuo terminale e quindi cambiare directory  (cd) nella cartella root del tuo progetto.

Per esempio, questo è come appare il comando se ti trovi nella tua home directory e vuoi spostarti nel progetto collocato nel Desktop.

cd Desktop/nome-progetto

Questo è un esempio di come spostarsi nella cartella di un progetto denominato Happy_Messages_Bot.

Step 2: vai sul Branch che vuoi rinominare

Puoi usare il comando git checkout per passare a un altro branch.

git checkout nome-branch

In questo esempio, voglio passare al branch denominato test-branch che ho creato.

Step 3: usa il flag -m per cambiare il nome al branch

Questo è la sintassi del comando per cambiare nome al branch:

git branch -m nuovo-nome-branch

In questo esempio, voglio cambiare il nome del mio branch da test-branch a test-branch2.

git branch -m test-branch2

Puoi usare git status per vedere il nuovo nome del branch.

Come rinominare un branch in Git – Metodo n° 2

Possiamo rinominare il branch locale con un solo comando senza dover usare git checkout.

Step 1: assicurati di trovarti sul branch master/main

Per controllare se ti trovi sul branch master/main, lancia git status:

Se non ti trovi sul branch master/main , allora devi lanciare git checkout master oppure git checkout main.

Step 2: usa il flag -m per cambiare il nome al Branch

Puoi usare questa sintassi per rinominare il branch esistente:.

git branch -m vecchio-nome nuovo-nome

Ecco come cambiare il nome di test-branch in test-branch2.

git branch -m test-branch test-branch2

Per vedere il nuovo nome del branch, puoi lanciare git branch, che mostrerà la lista di tutti i tuoi branch.

Questi appena esposti sono due metodi per rinominare dei branch locali in Git.

Cambiare branch è un'operazione di cui avrai bisogno spesso in Git.

Per farlo, puoi usare il comando git checkout.

Come creare un nuovo branch in Git

Per creare un nuovo branch in Git, puoi usare il comando git checkout e passare il flag -b seguito da un nome.

Questo creerà un nuovo branch partendo da quello corrente. La cronologia del nuovo branch inizierà con la posizione corrente del branch da cui hai lanciato il comando.

Assumendo di trovarsi sul branch chiamato master:

(master)$ git checkout -b my-feature
Switched to a new branch 'my-feature'
(my-feature)$

Qui puoi vedere un nuovo branch appena creato chiamato my-feature, che è stato generato come ramificazione a partire da master.

Come passare a un branch esistente in Git

Per passare a un branch esistente, puoi usare il comando git checkout (senza il flag  -b) e passare il nome del branch che vuoi raggiungere:

(my-feature)$ git checkout master
Switched to branch 'master'
(master)$

Esiste anche una pratica scorciatoia per ritornare al branch su cui ti trovavi precedentemente, passando - al comando git checkout invece del nome del branch:

(my-feature)$ git checkout -
Switched to branch 'master'
(master)$ git checkout -
Switched to branch 'my-feature'
(my-feature)$

Come eseguire il checkout di uno specifico commit

Per eseguire il checkout o passare ad un commit specifico, puoi anche usare  git checkout e passare come parametro lo SHA del commit invece del nome del branch.

Dopotutto, i branch sono effettivamente solo puntatori e rilevatori di specifici commit nella cronologia di Git.

Come trovare lo SHA di un commit

Un modo per trovare lo SHA di un commit è guardare nel log di Git.

Puoi visualizzare il log utilizzando il comando git log:

(my-feature)$ git log
commit 94ab1fe28727b7f8b683a0084e00a9ec808d6d39 (HEAD -> my-feature, master)
Author: John Mosesman <johnmosesman@gmail.com>
Date:   Mon Apr 12 10:31:11 2021 -0500

    This is the second commmit message.

commit 035a128d2e66eb9fe3032036b3415e60c728f692 (blah)
Author: John Mosesman <johnmosesman@gmail.com>
Date:   Mon Apr 12 10:31:05 2021 -0500

    This is the first commmit message.

Sulla prima riga di ciascun commit, dopo la parola commit si trova una lunga stringa di caratteri e di numeri: 94ab1fe28727...

Si tratta dello SHA, un identificatore unico che viene generato per ogni commit.

Per eseguire il checkout di un commit specifico, devi solo passare lo SHA del commit come parametro al comando git checkout:

(my-feature)$ git checkout 035a128d2e66eb9fe3032036b3415e60c728f692
Note: switching to '035a128d2e66eb9fe3032036b3415e60c728f692'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

HEAD is now at 035a128 a
((HEAD detached at 035a128))$

Nota: generalmente avrai bisogno di usare solo i primi caratteri dello SHA, poichè i primi quattro o cinque caratteri della stringa sono molto probabilmente unici in tutto il progetto.

Cosa vuol dire detached HEAD state?

Effettuare il checkout di uno specifico commit ti pone in un cosiddetto "detached HEAD state" (stato HEAD separato).

Dalla documentazione:

[detached HEAD state] significa semplicemente che HEAD si riferisce a uno specifico commit, invece che riferirsi a un branch con un nome.

Fondamentalmente, l'HEAD (uno dei puntatoti interni di Git che rileva dove ci si trova nella cronologia di Git) risulta separato dai branch conosciuti, così le modifiche, da questo punto, formeranno un nuovo percorso nella cronologia di Git.

Git vuole assicurarsi che questo stato HEAD separato sia quello che realmente vuoi ottenere, pertanto ti fornisce uno "spazio libero" per ogni sorta di modifica sperimentale - come descritto nell'output:

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

Traduzione: "Sei in uno 'stato HEAD separato'. Puoi dare un'occhiata in giro, fare cambiamenti sperimentali e salvarli in commit, e puoi cancellare qualsiasi commit che hai fatto in questo stato, senza alcun impatto sui branch, tornando indietro su un branch esistente"

Da questo posizione hai due opzioni:

• Sperimentare e poi buttare via le tue modifiche tornato al branch precedente
• Lavorare da qui ed iniziare un nuovo branch da questo punto

Puoi usare il comando  git switch - per annullare qualsiasi modifica che hai apportato e tornare al tuo branch precedente.

Se invece vuoi mantenere i tuoi cambiamenti e continuare da qui, puoi usare il comando git switch -c <nome-nuovo-branch> per creare un nuovo branch da questo punto.

Conclusioni

Il comando git checkout è utile e ha molteplici usi.

Puoi usarlo per creare nuovi branch, spostarti su un branch, eseguire il checkout di uno specifico commit, e molto altro.

Se ti è piaciuto questo tutorial, parlo di argomenti come questi su Twitter e ne scrivo sul mio sito.

Quello che un utente vede in un sito web ha un impatto sulla qualità della sua esperienza. Questo influenza anche la facilità con cui gli utenti possono interagire con l'intero sito in generale.

Aggiungere immagini allo sfondo di certe parti di un sito è spesso più attraente e interessante dal punto di vista visivo che cambiare meramente il colore di sfondo.

I browser moderni supportano una varietà di file di immagine come .jpg, .png, .gif e.svg.

Questo articolo spiega come aggiungere immagini al tuo codice HTML e come raffinarle per migliorarne l'aspetto.

Sintassi delle immagini di background

Il primo passo è assicurarsi di creare una cartella per contenere le immagini che vuoi usare nel tuo progetto.

Per esempio possiamo creare una cartella images nel progetto su cui stiamo lavorando ed aggiungere un'immagine chiamata sunset.png che vogliamo usare.

La proprietà CSS background-image ti permette di posizionare l'immagine dietro all'elemento HTML che desideri.

Potrebbe essere l'intera pagina (utilizzando il selettore CSS body che seleziona l'elemento <body> del nostro HTML), oppure solo una specifica parte della pagina come un elemento section, come nell'esempio sotto.

Per aggiungere un'immagine di sfondo a un elemento section nel tuo file .css, scrivi il seguente codice:

section {
  background-image: url("images/sunset.png");
}

Vediamo cosa succede nel dettaglio:

• section specifica l'elemento a cui vuoi applicare l'immagine.
• url() è utilizzato per dire al CSS dove si trova l'immagine che vuoi utilizzare.
• All'interno delle parentesi, "images/sunset.png" è il percorso all'immagine. Questo fa sapere al browser quale URL considerare.
• Il percorso in questo esempio è definito un percorso relativo: l'immagine a cui si riferisce è un file locale, relativo al nostro progetto ed alla nostra cartella di lavoro corrente, non è un indirizzo web. Per aggiungere un'immagine possiamo usare anche un percorso assoluto, che è un indirizzo web completo e inizia con un dominio URL (http://www.).
• Usare le virgolette è una buona abitudine, ma possiamo ometterle, per cui background-image: url(images/sunset.png) funziona ugualmente.
• Non dimenticare il punto e virgola!

Come evitare la ripetizione del background

Quando applichi un'immagine di sfondo a un elemento, questa viene ripetuta di default.

Se l'immagine è più piccola dell'elemento di cui è lo sfondo, essa si ripeterà in modo da riempirlo.

Come possiamo evitare che ciò accada?

La proprietà background-repeat necessita di 4 valori e consente di cambiare la direzione in cui l'immagine si ripete oppure bloccare la ripetizione dell'immagine completamente.

section {
  background-repeat: repeat;
}

Questo è il valore di default se non forniamo alla proprietà background-repeat un valore. In questo caso, l'immagine viene ripetuta sia orizzontalmente che verticalmente, ovvero sia nella direzione x che nella direzione y, fino a riempire completamente lo spazio.

section {
  background-repeat: no-repeat;
}

Il valore no-repeat blocca la ripetizione dell'immagine in tutte le direzioni, facendo sì che venga mostrata solo una volta.

section {
  background-repeat: repeat-x;
}

Questo valore ripete l'immagine solo orizzontalmente nella pagina. L'immagine viene ripetuta nella pagina nella direzione x. La direzione x in matematica è la direzione da sinistra a destra.

section {
  background-repeat: repeat-y;
}

Questo valore ripete l'immagine solo verticalmente nella pagina. L'immagine viene ripetuta nella pagina nella direzione y. La direzione y in matematica è la direzione dall'alto al basso.

Come impostare la posizione del background

Dopo aver aggiunto l'immagine di background e averne impedito la ripetizione, possiamo controllare ulteriormente come viene visualizzata nello sfondo dell'elemento migliorandone la posizione.

A questo scopo, utilizzeremo la proprietà background-position.

La proprietà necessita di due valori. Il si riferisce alla posizione orizzontale, o direzione x (distanza nel senso della larghezza del tag). Il secondo si riferisce alla posizione verticale, o direzione y (distanza nel senso dell'altezza del tag).

I valori possono essere unità come il pixel:

section {
  background-position: 20px 30px;
}

Questo sposterà l'immagine di 20px nel senso della larghezza e di 30px nel senso dell'altezza dell'elemento contenitore.

Invece dei pixel, possiamo usare un insieme di parole chiave come right, left, top, down, o center per posizionare l'immagine alla destra, sinistra, in alto, in basso o al centro dell'elemento.

section {
  background-position: right center;
}

Questo posiziona l'immagine sul lato destro del centro del tag.

Se vogliamo centrare l'immagine sia orizzontalmente che verticalmente, possiamo fare come nell'esempio seguente:

section {
  background-position: center center;
}

Per posizionare un'immagine con maggiore dettaglio, vale la pena menzionare l'uso delle percentuali:

section {
  background-position: 20% 40%;
}

Questo posiziona l'immagine al 20% nel senso della larghezza dell'elemento e al 40% nel senso dell'altezza dell'elemento.

Finora abbiamo visto valori usati in combinazione, ma possiamo anche specificare un singolo valore come background-position: 20px; o background-position: center; or background-position: 20%;, che viene applicato a entrambe le direzioni.

Come ridimensionare l'immagine di background

Pe controllare le dimensione dell'immagine di background possiamo usare la proprietà background-size.

Nuovamente, come nelle proprietà menzionate precedentemente, sono necessari due valori. Il primo per la dimensione orizzontale (x) ed il secondo per la dimensione verticale (y).

Possiamo usare i pixel, in questo modo:

section {
  background-size: 20px 40px;
  /* ridimensiona l'immagine a 20px di larghezza e 40px di altezza */
}

Se non conosciamo la larghezza esatta del contenitore in cui stiamo posizionando l'immagine, ci sono una serie di specifici valori che possiamo fornire alla proprietà.

• background-size: cover; ridimensiona l'immagine di background in modo da coprire l'intero spazio dello sfondo dell'elemento indipendentemente dall'ampiezza dello stesso. Se l'immagine è troppo grande e ha una rapporto dimensionale più grande dell'elemento in cui è contenuta, essa verrà stirata e poi tagliata ai bordi.
• background-size: contain; contiene l'immagine, come il nome suggerisce. Fa sì che l'intera immagine sia mostrata in background senza tagliare nessuna parte. Se l'immagine è molto più piccola dell'elemento, lo spazio rimasto vuoto verrà riempito con la ripetizione dell'immagine, così possiamo usare la regola background-repeat: no-repeat;, menzionata in precendenza.

Nell'immagine di seguito, la regola background-size:cover; in questo caso taglia parti dell'immagine.

Quando cambiamo la regola in  background-size:contain; possiamo vedere che l'immagine si rimpicciolisce per adeguarsi alla dimensione del contenitore (in questo caso, section).

Come usare la proprietà background-attachment

Con la proprietà background-attachment possiamo controllare dove viene ancorata l'immagine di background , ovvero se l'immagine è fissa oppure no rispetto alla finestra del browser.

Il valore di default è background-attachment: scroll;, dove l'immagine di background resta solidale al suo elemento e segue il naturale flusso delle pagine dato dallo scorrimento verso l'alto e verso il basso.

Il secondo valore della proprietà che possiamo avere è background-attachment: fixed;. Questo rende l'immagine di background fissa nella stessa posizione, rispetto alla pagina e rispetto al viewport (area visibile) del browser. Questo crea un effetto di parallasse di cui puoi vedere un esempio qui:

I gradienti di background

Un caso differente rispetto alla proprietà background-image è richiedere al browser di creare un gradiente.

La background-image in questo caso non ha un URL, ma invece ha un gradiente lineare.

Il modo più semplice per creare un gradiente è specificare un angolo. Questo controlla la direzione del gradiente e il passaggio da un colore all'altro. Infine somma i due colori che vuoi unire insieme in un gradiente per lo sfondo del tag.

Un gradiente che va dall'alto al basso e dal nero al bianco è:

section {
  background-image: linear-gradient(black,white);
}

Gli angoli più comuni usati per i gradienti sono:

• 0deg dall'alto al basso
• 90deg da sinistra a destra
• 180deg dal basso all'alto
• 270deg da destra a sinistra

Gli angoli soprariportati corrispondono a to top, to right, to bottom e to left, rispettivamente.

section {
  background-image: linear-gradient(to left,pink,orange);
}

Invece del nome dei colori, possiamo utilizzare i colori in notazione esadecimale per essere più dettagliati ed avere una maggiore varietà di opzioni:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
      }

Possiamo anche includere più di due colori in un gradiente, creando differenti effetti e schemi di colore.

Conclusioni

Questo segna la fine della nostra introduzione alla sintassi di base della proprietà background-image.

Da qui le possibilità sono infinite e lasciano spazio a un sacco di creatività. Questi effetti aiutano l'utente ad avere una piacevole esperienza mentre visitano il tuo sito.

Spero che questo ti sia stato utile, grazie per aver letto il mio articolo.

Divertiti con i tuoi progetti e buona programmazione!

Generalmente, un stringa rappresenta una sequenza di caratteri in un linguaggio di programmazione.

Diamo un'occhiata ad un esempio di stringa creata usando la sequenza di caratteri, "Yes, You Can DO It!". In JavaScript, possiamo creare una stringa in un paio di modi:

• Usando una stringa letterale come dato primitivo:

const msg = "Yes, You Can DO It!";

• Usando il costruttore String() come un oggetto:

const msg = new String("Yes, You Can DO It!");

Un fatto interessante sulle stringhe in JavaScript è che possiamo accedere ai caratteri in una stringa tramite il loro indice. L'indice del primo carattere è 0 e per i caratteri successivi si incrementa di 1 per ciascun carattere. Pertanto possiamo accedere a ciascuno dei caratteri della stringa come segue:

let str = "Yes, You Can Do It!";

console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,

console.log(str[10]); // a

L'immagine sotto rappresenta la stessa cosa:

Oltre alla possibilità di accedere ai caratteri della stringa tramite i loro indici, JavaScript fornisce un sacco di metodi utili per accedere ai caratteri, eliminare parti di una stringa e manipolarle in vari modi.

In questo articolo, ti mostrerò un pratico metodo delle stringhe chiamato split().  Spero ti divertirai nel leggerlo.

Il metodo split() in JavaScript

Il metodo split() divide una stringa in due o più sottostringhe in base ad un separatore. Il separatore può essere un singolo carattere, un'altra stringa oppure una espressione regolare.

Dopo la divisione della stringa in più sottostringhe, il metodo split() le inserisce in un array e restituisce quest'ultimo come risultato. Non viene apportata alcuna modifica alla stringa originale.

Comprendiamo meglio come funziona con un esempio. Qui è riportata una stringa creata usando una stringa letterale:

let message = 'I am a Happy Go lucky Guy';

Possiamo chiamare il metodo split() sulla stringa  message. Dividiamo la stringa sulla base del carattere spazio (' '). Qui il carattere spazio agisce come separatore.

// Dividiamo usando il carattere spazio
let arr = message.split(' ');

// L'array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]


// Accedi a ciascun elemento nell'array
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"

Lo scopo principale del metodo split()  è estrapolare le parti della stringa che ti interessano per impiegarli successivamente per altre operazioni.

Come separare una stringa in ciascuno dei suoi caratteri

Puoi separare una stringa in ciascuno dei suoi caratteri usando una stringa vuota ('') come separatore. Nell'esempio seguente, dividiamo lo stesso messaggio usando una stringa vuota. Il risultato della separazione sarà un array contenente tutti i caratteri della stringa originaria.

console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]

💡 Nota che la separazione di una stringa vuota ('') usando una stringa vuota come separatore restituisce un array vuoto. Questa potrebbe essere una domanda nei tuoi prossimi colloqui di lavoro!

''.split(''); // returns []

Come separare una stringa in un singolo array

È possibile invocare il metodo split() su una stringa senza specificare un separatore. In questo caso nel metodo  split()  non è specificato nessun argomento.

Quando invochi il metodo  split() su una stringa senza separatore, questo restituisce un array contenente l'intera stringa.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // restituisce ["I am a Happy Go lucky Guy"]

💡 Nota nuovamente che, chiamando il metodo split() su una stringa vuota ('') senza separatore, otterrai un array con una stringa vuota. Non viene restituito un array vuoto.

Qui di seguito sono riportati due esempi in modo da evidenziare le differenze:

// Restituisce un array vuoto
''.split(''); // restituisce []

// Restituisce un array con una stringa vuota
''.split() // restituisce [""]

Come separare una stringa usando come separatore un carattere non presente nella stringa stessa

Solitamente, si usa come separatore un carattere che è parte della stringa che stiamo provando a dividere. Ci sono casi in cui potresti aver passato come argomento un separatore che non fa parte della stringa o non coincide con alcuna parte della stessa. In questo caso, il metodo split()  restituisce un array con l'intera stringa come elemento.

Nell'esempio riportato sotto, la stringa del messaggio non ha il carattere virgola (,). Proviamo a dividere la stringa usando il separatore virgola (,).

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]

💡 Dovresti tenere a mente questo fatto in quanto risulta molto utile durante il debug del codice per banali errori come passare il separatore errato nel metodo split().

Come separare una stringa con un limite

Se pensi che il metodo split()  assuma solo il separatore come parametro opzionale, lascia che ti dica che ce n'è anche un altro. Puoi passare come parametro opzionale anche un valore limite al metodo split() .

string.split(splitter, limit);

Come indica il nome, il parametro limit limita il numero di divisioni. Significa che l'array risultante avrà solo il numero di elementi specificato nel parametro limite.

Nell'esempio seguente, separiamo una stringa usando lo spazio (' ') come divisore. Possiamo anche passare il numero 4 come limite. Il metodo split() restituisce un array con solo quattro elementi, ignorando il resto.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"]

Come separare usando una espressione regolare

Possiamo passare anche una espressione regolare (regex) come separatore al metodo  split(). Consideriamo la stringa da dividere:

let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';

Separiamo la stringa ad ogni punto (.), punto esclamativo (!) e punto interrogativo (?). Possiamo scrivere un'espressione regolare che identifica quando questi caratteri si presentano. Quindi passiamo l'espressione regolare al metodo split() ed lo invochiamo sulla stringa soprariportata.

let sentences = message.split(/[.,!,?]/);
console.log(sentences);

Il risultato sarà il seguente:

Puoi usare il parametro limit per limitare l'output ai soli tre elementi iniziali, come segue:

sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);

Il risultato sarà il seguente:

💡 Se vuoi catturare i caratteri usati nell'espressione regolare nell'array risultante, devi modificare leggermente l'espressione regolare. Usa le parentesi tonde per catturare i caratteri corrispondenti. L'espressione regolare aggiornata sarà /([.,!,?])/.

Come sostituire caratteri in una stringa usando il metodo Split()

Si possono risolvere molti problemi interessanti usando il metodo split() combinato con altri metodi di stringhe e array. Vediamone uno qui. Potrebbe essere comune dover sostituire tutte le occorrenze di una stringa con un altro carattere.

Per esempio, potresti voler creare un id di un elemento HTML dal valore di un nome. Il valore attribuito al nome potrebbe contenere uno spazio (' '), ma in HTML, il valore id non deve contenere alcuno spazio. Possiamo ovviare a questo problema nel modo seguente:

let name = 'Tapas Adhikary';
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]

let joined = subs.join('-');
console.log(joined); // Tapas-Adhikary

Consideriamo che il nome è costiutuito da un nome proprio (Tapas) ed un cognome (Adhikary) separati da uno spazio. Nell'esempio per prima cosa separiamo il nome con uno spazio come separatore. Questo restituisce un array contente il nome ed il cognome come elementi, ovvero ['Tapas', 'Adhikary'].

Quindi usiamo il metodo degli array chiamato join() per unire gli elementi dell'array usando il carattere -. Il metodo join() restituisce una stringa unendo gli elementi con il carattere passato come parametro. Alla fine otteniamo il risultato finale con la stringa Tapas-Adhikary.

ES6: come separare un array con la destrutturazione

La specifica ECMAScript2015 (ES6) ha introdotto modi più innovativi per estrarre un elemento da un array ed assegnarlo a una variabile. Questa elegante sintassi è conosciuta come destrutturazione degli array (array destructuring). Possiamo usarla con il metodo  split() per assegnare l'output ad una variabile facilmente e con meno codice.

let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);

In questo esempio abbiamo separato il nome usando come separatore il carattere spazio. Quindi abbiamo assegnato il valore restituito dall'array a una coppia di variabili (firstName e lastName) usando la sintassi di destrutturazione degli array.

Prima di concludere...

👋 Vorresti continuare a scrivere codice ed imparare con me? Puoi trovare lo stesso contenuto qui in questo video YouTube. Devi solo aprire il tuo editor di codice preferito e iniziare.

Spero che tu abbia trovato utile questo articolo, e che leggerlo ti abbia aiutato a comprendere più chiaramente il metodo delle stringhe split() in JavaScript. Per acquisire una buona dimestichezza, usa gli esempi presentati per fare pratica più volte. Puoi trovare tutti gli esempi di codice nel mio repository GitHub.

Seguimi su Twitter (@tapasadhikary).

Potrebbero piacerti anche questi articoli (in inglese):

• The JavaScript Array Handbook – JS Array Methods Explained with Examples
• 10 DevTools tricks to help you with CSS and UX design
• A practical guide to object destructuring in JavaScript
• 10 trivial yet powerful HTML facts you must know
• 10 VS Code emmet tips to make you more productive

Ci sono molti modi pe convertire una stringa in un numero usando JavaScript. Ma qual è in codice nella pratica?

In questo articolo, ti mostrerò 11 modi per convertire una stringa in un numero.

Qui c'è uno Scrim interattivo su come convertire una stringa in un numero in JavaScript

Come convertire una stringa in un numero in JavaScript usando la funzione Number()

Un modo per convertire una stringa in un numero è utilizzare la funzione  Number() .

In questo esempio, abbiamo una stringa denominata  quantity con il valore "12".

const quantity = "12";

Se usiamo l'operatore typeof su  quantity, otteniamo come risultato il tipo stringa.

console.log(typeof quantity);

Possiamo convertire quantity  in un numero utilizzando la funzione  Number  in questo modo:

Number(quantity)

Possiamo controllare come questa variabile sia ora un numero utilizzando l'operatore typeof nuovamente:

console.log(typeof Number(quantity));

Se si prova a passare come argomento un valore che non può essere convertito in un numero, allora il valore risultante sarà NaN ("Not a Number", letteralmente "non un numero").

console.log(Number("awesome"));

Come convertire una stringa in un numero in JavaScript usando la funzione parseInt()

Un altro modo per convertire una stringa in un numero è utilizzare la funzione parseInt(). Questa funzione prende come argomento una stringa e, opzionalmente, una radice.

Una radice è un numero tra 2 e 36 che rappresenta la base in un sistema numerico. Per esempio, una radice pari a 2 rappresenta il sistema binario, mentre la radice 10 rappresenta il sistema decimale.

Possiamo utilizzare la variabile quantity già usata in precedenza e convertirla in un numero:

const quantity = "12";

console.log(parseInt(quantity, 10));

Cosa succede se provo a cambiare la variabile quantity in "12.99"? Il risultato utilizzando parseInt() sarà il numero 12.99?

const quantity = "12.99";

console.log(parseInt(quantity, 10));

Come puoi vedere, il risultato è un numero intero arrotondato. Se desideravi come risultato un numero in virgola mobile (floating point number), allora avresti dovuto utilizzare parseFloat().

Come convertire una stringa in un numero in JavaScript usando la funzione parseFloat()

La funzione parseFloat() prende come argomento un valore e restituisce come risultato un numero floating point. Esempi di numeri floating point sono 12.99 e 3.14.

Se modifichiamo il nostro esempio precedente per usare parseFloat(), il risultato sarà il numero floating point 12.99.

const quantity = "12.99";

console.log(parseFloat(quantity));

Nel caso in cui fossero presenti spazi bianchi nella stringa prima o dopo il valore che deve essere convertito, la funzione parseFloat() effettuerà ugualmente la conversione.

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

Se il primo carattere nella stringa non può essere convertito in un numero, allora parseFloat()  restituirà NaN.

const quantity = "F12.99";

console.log(parseFloat(quantity));

Come convertire una stringa in un numero in JavaScript usando l'operatore unario più (+)

L'operatore unario più  (+) convertirà una stringa in un numero. L'operatore deve essere posizionato prima dell'operando.

const quantity = "12";

console.log(+quantity);

Possiamo anche usare l'operatore unario più (+)  per convertire una stringa in un numero floating point.

const quantity = "12.99";

console.log(+quantity);

Se il valore della stringa non può essere convertito in un numero, allora il risultato sarà NaN.

const quantity = "awesome";

console.log(+quantity);

Come convertire una stringa in un numero in JavaScript moltiplicando la stringa per il numero 1

Un altro modo per convertire una stringa in un numero è utilizzare una operazione matematica di base. Puoi moltiplicare il valore della stringa per 1 ed otterrai un numero.

const quantity = "12";

console.log(quantity * 1);

Come puoi vedere, quando moltiplichiamo il valore di quantity per 1, il risultato è il numero 12. Ma come funziona?

In questo esempio, JavaScript ha convertito il nostro valore della stringa in un numero e quindi ha eseguito l'operazione matematica. Tuttavia se il valore contenuto nella stringa non può essere convertito, allora l'operazione matematica non può essere eseguita e il risultato sarà NaN.

const quantity = "awesome";

console.log(quantity * 1);

Questo metodo funziona anche con i numeri floating point.

const quantity = "10.5";

console.log(quantity * 1);

Come convertire una stringa in un numero in JavaScript dividendo la stringa per il numero 1

Invece di moltiplicare per 1, puoi anche dividere la stringa per 1. JavaScript convertirà il valore della nostra stringa in un numero e quindi eseguirà l'operazione matematica.

const quantity = "10.5";

console.log(quantity / 1);

Come convertire una stringa in un numero in JavaScript sottraendo il numero 0 dalla stringa

Un ulteriore metodo è sottrarre 0 dalla stringa. Come prima, JavaScript convertirà il valore della nostra stringa in un numero ed eseguirà l'operazione matematica.

const quantity = "19";

console.log(quantity - 0);

Come convertire una stringa in un numero in JavaScript utilizzando l'operatore NOT bit a bit (~)

L'operatore NOT bit a bit (~) inverte i bit di un operando e converte tale valore in un intero a 32 bit con segno. Un intero a 32 bit con segno è un valore che rappresenta un numero intero con 32 bit (equivalenti a 4 byte).

Se utilizziamo un operatore NOT bit a bit (~)  su un numero, questi eseguirà la seguente operazione: -(x + 1)

console.log(~19);

Ma se utilizziamo due operatori NOT bit a bit  (~), allora convertiremo la nostra stringa in un numero:

const quantity = "19";

console.log(~~quantity);

Questo metodo non funziona con i numeri floating point perchè il risultato sarà sempre un intero.

const quantity = "19.99";

console.log(~~quantity);

Se provi ad usare questo metodo su un carattere non-numerico, il risultato sarà zero.

const quantity = "awesome";

console.log(~~quantity);

Questo metodo ha dei limiti perchè inizierà a dare problemi per valori che sono considerati troppo grandi. È importante assicurarsi che il numero da convertire sia compreso tra i valori degli interi a 32 bit con segno (ovvero compreso tra -2.147.483.648 e +2.147.483.648).

const quantity = "2700000000";

console.log(~~quantity);

Per saperne di più sull'operatore NOT bit a bit (~) , puoi fare riferimento alla seguente documentazione.

Come convertire una stringa in un numero in JavaScript usando la funzione Math.floor()

Un altro modo di convertire una stringa in un numero è utilizzando la funzione Math.floor() . Questa funzione arrotonda per difetto un numero all'intero più vicino.

const quantity = "13.4";

console.log(Math.floor(quantity));

Come nei precedenti esempi, se proviamo ad usare un carattere non numerico, il risultato sarà  NaN.

const quantity = "awesome";

console.log(Math.floor(quantity));

Come convertire una stringa in un numero in JavaScript usando la funzione Math.ceil()

La funzione Math.ceil()  arrotonda per eccesso un numero all'interno più vicino.

const quantity = "7.18";

console.log(Math.ceil(quantity));

Come convertire una stringa in un numero in JavaScript usando la funzione Math.round()

La funzione  Math.round() arrotonda un numero all'intero più vicino.

Se abbiamo il valore di 6.3, la funzione  Math.round() restituirà il valore 6.

const quantity = "6.3";

console.log(Math.round(quantity));

Ma se cambio tale valore a 6.5, allora la funzione Math.round() restituirà il valore 7.

const quantity = "6.5";

console.log(Math.round(quantity));

Conclusioni

In questo articolo, ti ho mostrato 11 modi per convertire una stringa in un numero usando JavaScript.

Qui sono elencati gli 11 differenti metodi discussi nell'articolo:

1. usare la funzione Number()
2. usare la funzione parseInt()
3. usare la funzione parseFloat()
4. usare l'operatore unario più (+)
5. moltiplicare la stringa per il numero 1
6. dividere la stringa per il numero 1
7. sottrarre il numero 0 dalla stringa
8. usare l'operatore NOT bit a bit (~)
9. usare la funzione Math.floor()
10. usare la funzione Math.ceil()
11. usare la funzione Math.round()

Spero che questo articolo ti sia piaciuto. Buona fortuna per il tuo viaggio nel mondo di JavaScript.

Il Branching (la ramificazione dello sviluppo di un progetto) è una parte essenziale di Git, in quanto ti permette di lavorare senza manomettere il codice già in produzione.

Quando finisci di lavorare con un branch diverso da main, vuoi unirlo con il ramo main con un commit di merge,  in modo che le nuove feature o i bug risolti che hai appena inserito diventino effettivi e possano essere mostrati.

Ma cosa succede se finisci di effettuare il merge e ti accorgi di aver dimenticato di fare una cosa? Oppure cosa succede se accidentalmente effettui il merge quando non sei ancora pronto?

Puoi annullare quasi qualsiasi azione in Git. Così, in questo articolo, ti mostrerò come annullare un merge in Git, in modo da ripristinare la situazione precedente all'ultimo commit che hai effettuato.

Come annullare un commit di merge in Git

Puoi usare il comando Git reset per annullare un merge.

Come prima cosa, è necessario controllare l'hash (o id) del commit, da usare per tornare al commit precedente.

Per controllare l'hash, usa il comando git log oppure git reflog. git reflog è una opzione migliore perché le informazioni sono più leggibili con questo comando.

Quando ottieni l'hash del commit a cui vuoi tornare, lancia git reset --hard commit-prima-del-merge:

Dovresti vedere alcuni elementi essere rimossi dal tuo editor di codice quando lanci il comando.

Se non sei sicuro dell'hash dell'ultimo commit, puoi lanciare il comando git reset --hard HEAD~1  per tornare al commit precedente al merge:

Nota che quando utilizzi il flag  --hard per annullare un merge, qualsiasi cambiamento non salvato in un commit viene annullato.

Un modo migliore per annullare un merge in Git

Dato che i metodi discussi precedentemente annullano le modifiche non salvate in un commit, Git fornisce un flag più sicuro, denominato  --merge.

Per annullare un merge con il flag  --merge, lancia  git reflog per vedere gli hash dei commit, quindi lancia  git reset --merge commit-precedente:

Si può anche usare la keyword HEAD con il flag  --merge lanciando git reset --merge HEAD~1:

N.B.: Se non ottieni una risposta da questo comando quando usi il flag  --merge, non preoccuparti, funziona.

Conclusione

In questo articolo, hai imparato come annullare un merge in Git, e adesso potrai annullare un merge non voluto o errato e lavorare in Git con maggiore efficienza.

Qui ci sono i punti principali da tenere a mente con i flag  --hard e --merge quando si usano per annullare un merge: il flag  --hard rimuove le modifiche non salvate in un commit, mentre il flag  --merge mantiene le modifiche non salvate in un commit.

Grazie per aver letto questo articolo!

Quando stai programmando in Python, puoi utilizzare la funzione enumerate() e un ciclo for per visualizzare ciascun valore di un iterabile con una variabile contatore.

In questo articolo, ti mostrerò come usare la funzione enumerate() di Python con un ciclo for e ti spiegherò perché è una funzione migliore rispetto a creare un tuo contatore incrementale.

Prima però diamo un'occhiata a come farlo senza la funzione enumerate().

Come usare un ciclo for senza la funzione enumerate() in Python

In Python, un iterabile è un oggetto su cui è possibile iterare per restituire un valore alla volta. Tra gli esempi di iterabili sono compresi liste, tuple e stringhe.

In questo esempio, abbiamo una lista di nomi di cani ed una variabile chiamata count.

dogs = ['Harley', 'Phantom', 'Lucky', 'Dingo']
count = 1

Possiamo usare un ciclo for per attraversare la lista e stampare ciascun nome. Inoltre, incrementeremo la variabile count di 1 ogni volta per tenere traccia di quante volte abbiamo iterato sulla lista.

for name in dogs:
    print(count, name)
    count += 1

Di seguito il risultato stampato sullo schermo:

Anche se questo approccio funziona, presenta un possibile errore.

Un errore comune potrebbe essere quello di dimenticare di incrementare la variabile count.

Se modifico il codice, otteniamo:

dogs = ['Harley', 'Phantom', 'Lucky', 'Dingo']
count = 1
for name in dogs:
    print(count, name)

Ora la variabile count non tiene traccia più accuratamente del numero di iterazioni del ciclo sulla lista.

Invece di far incrementare un variabile count, possiamo usare la funzione enumerate() con il ciclo for.

Che cosa è la funzione enumerate() in Python?

La funzione integrata di Python enumerate() prende un iterabile come input e un argomento opzionale di inizio.

enumerate(iterabile, argomento opzionale di inizio)

Se ometti l'argomento opzionale di inizio, il contatore viene impostato a zero.

Il valore restituito dalla funzione enumerate() è un oggetto.

Questa funzione tiene traccia delle iterazioni eseguite così che tu non ti debba ricordare di aggiornare la variabile count .

Possiamo usare la funzione enumerate() con un ciclo for per visualizzare il valore di un iterabile con un contatore.

Come usare un ciclo for con la funzione enumerate() in Python

In questo esempio, vogliamo visualizzare la lista delle indicazioni stradali per andare da Times Square alla Juilliard School of Music a New York.

Come prima cosa dobbiamo creare la lista delle indicazioni, denominata directions:

directions = [
    'Head north on Broadway toward W 48th St',
    'Turn left onto W 58th St',
    'Turn right onto 8th Ave',
    'Turn left onto Broadway',
    'Turn left onto Lincoln Center Plaza',
    'Turn right onto Jaffe Dr',
    'Turn left onto Broadway',
    'Turn left onto W 65th St'
]

Quindi, nel ciclo for, creiamo le variabili count e direction che ci permetteranno di eseguire l'iterazione.

La funzione enumerate() prenderà come argomenti di input la lista  directions e la variabile start. Vogliamo iniziare il conteggio da 1 invece che da 0 (come impostato di default).

for count, direction in enumerate(directions, start=1):

All'interno del ciclo, stamperemo le variabili count e direction.

print(count, direction)

Ecco il codice completo:

directions = [
    'Head north on Broadway toward W 48th St',
    'Turn left onto W 58th St',
    'Turn right onto 8th Ave',
    'Turn left onto Broadway',
    'Turn left onto Lincoln Center Plaza',
    'Turn right onto Jaffe Dr',
    'Turn left onto Broadway',
    'Turn left onto W 65th St'
]

for count, direction in enumerate(directions, start=1):
    print(count, direction)

E il risultato nella console:

Come puoi vedere la variabile count  è stata automaticamente aggiornata dalla funzione enumerate().

In questo modo si rimuove la possibilità di errori se dimentichiamo di incrementare la variabile count.

Conclusioni

Puoi utilizzare la funzione enumerate() ed il ciclo for per visualizzare ciascun valore di un iterabile con un contatore.

La funzione enumerate() prende come input un iterabile e un argomento opzionale di inizio.

enumerate(iterabile, argomento opzionale di inizio)

Se l'argomento opzionale di inizio viene omesso, il conteggio viene inizializzato a zero.

L'uso della funzione enumerate() è un'alternativa migliore rispetto a creare un proprio contatore incrementale in un ciclo for.

La funzione enumerate() aggiorna automaticamente il conteggio e pertanto elimina la possibilità che si possa dimenticare di incrementare il contatore.

Spero che questo articolo ti sia piaciuto e buona fortuna per il tuo viaggio nel mondo di Python.

Nei tuoi documenti HTML, spesso hai necessità di creare una lista di elementi. A questo scopo puoi usare gli elenchi puntati.

Puoi mostrare gli elenchi puntati con il relativo carattere (o entità) Unicode.

In questo articolo, ti mostrerò le entità Unicode e HTML utili a mostrare gli elenchi puntati in una pagina web.

Verso la fine di questo articolo, ti mostrerò inoltre le combinazioni a cinque caratteri che ti permettono di visualizzare il simbolo del punto.

Le entità Unicode e HTML per gli elenchi puntati

Il carattere Unicode per mostrare il simbolo del punto, o punto elenco, è U+2022.

Tuttavia, per usare questo carattere Unicode correttamente, sostituisci U+ con una "e" commerciale (&), cancelletto (#) e x. Quindi digita il numero 2022 ed aggiungi un punto e virgola. In questo modo, diventa •.

Apparirà così:

<h1>Languages of the web</h1>
<h3>&#x2022; HTML</h3>
<h3>&#x2022; CSS</h3>
<h3>&#x2022; JavaScript</h3>
<h3>&#x2022; PHP</h3>

Oltre al carattere Unicode • puoi anche usare le entità HTML  • e • per mostrare elenchi puntati o simboli punto elenco sulla pagina web.

<h1>Languages of the web</h1>
<h3>&#8226; HTML</h3>
<h3>&bull; CSS</h3>
<h3>&#8226; JavaScript</h3>
<h3>&bull; PHP</h3>

L'output rimane lo stesso:

Combinazione di tasti rapida per digitare il simbolo del punto

Per digitare il simbolo del punto sulla tua tastiera, attiva il tastierino numerico premendo BlocNum, tieni premuto Alt e digita 0, 1, 4, e 9  in successione.

Se non digiti i numeri con il tastierino numerico, il punto non apparirà.

Grazie per aver letto l'articolo!

I tipi di dato ed il controllo di tipo di dato (type checking) sono aspetti fondamentali di ogni linguaggio di programmazione.

Molti linguaggi di programmazione, come Java, sono fortemente tipizzati. Questo significa che una variabile definita con uno specifico tipo può contenere esclusivamente un valore appartenente a tale tipo.

JavaScript, invece, è un linguaggio debolmente tipizzato o dinamicamente tipizzato. Questo significa che una variabile può contenere un valore di qualsiasi tipo. Anche il seguente codice JavaScript può essere eseguito:

let one = 1;
one = 'one';
one = true;
one = Boolean(true);
one = String('It is possible');

Tenendo questo in considerazione, diventa di importanza critica conoscere il tipo di una variabile in qualsiasi momento.

Il tipo di una variabile è determinato dal tipo di valore ad essa assegnato. JavaScript ha uno speciale operatore, denominato typeof, il quale ti permette di conoscere il tipo di qualsiasi valore.

In questo articolo, impareremo come viene utilizzato typeof, insieme ad alcuni tranelli da cui stare in guardia.

I tipi di dato in JavaScript

Diamo una rapida occhiata ai tipi di dato in JavaScript prima di analizzare meglio l'operatore typeof.

Ci sono sette tipi di dato primitivi in JavaScript. Un tipo di dato primitivo è qualsiasi cosa che non è un oggetto. Essi sono:

1. String (stringa di testo)
2. Number (numero floating-point in doppia precisione)
3. BigInt (numero intero di dimensione arbitraria)
4. Symbol (variabile particolare il cui valore è unico)
5. Boolean (variabile booleana)
6. undefined
7. null

Qualsiasi altra cosa è un oggetto (Object) -  array e funzioni compresi. Un oggetto è una raccolta di coppie chiave-valore.

L'operatore TypeOf di JavaScript

L'operatore typeof considera solo un operando (operatore unario). Valuta il tipo dell'operando e restituisce il risultato come una stringa.

typeof 007;  // restituisce 'number'

Esiste una sintassi alternativa per l'operatore  typeof, che può essere usato come una funzione:

typeof(operand)

Questa sintassi è utile quando vuoi valutare una espressione invece di un singolo valore. Ecco un esempio:

typeof(typeof 007); // restituisce 'string'

Nell'esempio qui sopra, l'espressione typeof 007 valuta come tipo di dato "number" e restituisce la stringa 'number'. typeof('number') quindi fornisce come risultato un tipo di dato 'string'.

Osserviamo un altro esempio  per comprendere l'importanza delle parentesi con l'operatore typeof.

typeof(999-3223); // restituisce, "number"

Se ometti le parentesi, l'espressione restituirà NaN("Not a Number"):

typeof 999-3223; // restituisce, NaN

Questo accade perché, in primo luogo, l'espressione typeof 999 darà come risultato una stringa, "number". Quindi l'espressione "number" - 32223 restituirà  NaN, come accade quando si esegue una operazione di sottrazione tra una stringa ed un numero.

Esempi di TypeOf in JavaScript

I seguenti snippet di codice mostrano il risultato del controllo di tipi di dato di differenti valori utilizzando l'operatore typeof.

typeof 0;  //'number'
typeof +0;  //'number'
typeof -0;  //'number'
typeof Math.sqrt(2);  //'number'
typeof Infinity;  //'number'
typeof NaN;  //'number', anche se risulta Not a Number
typeof Number('100');  //'number', dopo aver convertito la stringa '100' nel tipo Number
typeof Number('freeCodeCamp');  //'number', nonstante questa stringa letterale non possa essere convertita in Number

typeof true;  //'boolean'
typeof false;  //'boolean'
typeof Boolean(0);  //'boolean'

typeof 12n;  //'bigint'

typeof '';  //'string'
typeof 'freeCodeCamp';  //'string'
typeof `freeCodeCamp is awesome`;  //'string'
typeof '100';  //'string'
typeof String(100); //'string'

typeof Symbol();  //'symbol'
typeof Symbol('freeCodeCamp');  //'symbol'

typeof {blog: 'freeCodeCamp', author: 'Tapas A'};  //'object';
typeof ['This', 'is', 101]; //'object'
typeof new Date();  //'object'
typeof Array(4);  //'object'

typeof new Boolean(true);  //'object'; 
typeof new Number(101);  //'object'; 
typeof new String('freeCodeCamp');  //'object';
typeof new Object;  //'object'

typeof alert;  //'function'
typeof function () {}; //'function'
typeof (() => {});  //'function' - è una funzione a freccia, pertanto sono necessarie le parentesi
typeof Math.sqrt;  //'function'

let a;
typeof a;  //'undefined'
typeof b;  //'undefined'
typeof undefined;  //'undefined'

typeof null;  //'object'

La tavola seguente mostra i valori risultanti dal controllo di tipo forniti da typeof:

Tranelli comuni con typeof

Ci sono dei casi in cui l'operatore  typeof potrebbe non restituire i tipi che ci aspettiamo. Questo può causare confusione ed errori. Ecco alcuni casi:

Il tipo di NaN è Number (numero)

typeof NaN;  //'number', anche se è Not a Number (letteralmente Non un Numero)

Il risultato di typeof NaN è 'number', ovvero numero. Questo è strano, pertanto non dovremmo usare typeof per individuare un valore NaN. Ci sono modi migliori per gestire questa situazione. Li vedremo tra poco.

Il tipo di null è Object (oggetto)

  typeof null;  //'object'

In JavaScript,  typeof null restituisce object (oggetto), il che dà l'errata impressione che null sia un oggetto invece che un tipo di dato primitivo.

Il risultato di typeof null è effettivamente un bug nel linguaggio. C'è stato un tentativo di risolverlo in passato ma è stato abbandonato a causa di problemi di compatibilità con le versioni precedenti di JS.

Il tipo di una variabile non dichiarata è Undefined

Prima dello standard ES6, un controllo di tipo su una variabile non dichiarata forniva come risultato  'undefined'. Ma questo non è un modo sicuro per gestire tale situazione ed evitare errori.

Con lo standard ES6 possiamo dichiarare variabili con visibilità a livello di blocco (un blocco è un pezzo di codice delimitato da {}. La visibilità a livello di blocco significa che la variabile è visibile a tutto il codice inserito tra queste parentesi graffe) con le parole chiave let oppure const. Se utilizzi l'operatore typeof su tali variabili prima che siano inizializzate, otterrai un errore di tipo ReferenceError.

 typeof cat; // ReferenceError
 let cat = 'brownie'; 

Il tipo di una funzione costruttore è object - oggetto

Tutte le funzioni costruttore, ad eccezione del costruttore Function, saranno sempre classificate da typeof come 'object', ovvero oggetto.

typeof new String('freeCodeCamp'); //'object'

Questo può portare ad un po' di confusione, siccome ci si attende che l'operatore restituisca il tipo effettivo del dato (nel caso soprariportato, un tipo di dato string - stringa).

Il tipo di un array è un oggetto

Sebbene tecnicamente corretto, questo potrebbe essere il caso più spiacevole. Vogliamo differenziare tra un array ed un oggetto anche se un array è tecnicamente un oggetto in JavaScript.

typeof Array(4);  //'object'

Fortunatamente ci sono modi per rilevare un array correttamente. Li vedremo tra poco.

Oltre typeof – Un migliore controllo del tipo dei dati

Ora che abbiamo conosciuto alcune delle limitazioni che sorgono con l'impiego dell'operatore typeof, osserviamo come porvi rimedio ed implementare un controllo del tipo dei dati più efficace.

Come rilevare NaN

In JavaScript, NaN è un valore speciale. Il valore NaN rappresenta il risultato di una espressione aritmetica che non può essere effettivamente rappresentata. Per esempio:

let result = 0/0;
console.log(result);  // restituisce NaN

Inoltre, se eseguiamo una qualsiasi operazione aritmetica con NaN, questa fornirà sempre come risultato NaN.

console.log(NaN + 3); // restituisce NaN

Il controllo di tipo su NaN eseguito utilizzando l'operatore typeof non aiuta molto, poichè restituisce il tipo 'number', numero. JavaScript ha una funzione globale denominata isNaN() per verificare se un risultato è NaN.

isNaN(0/0); // restituisce true

Ma anche qui sorge un problema:

isNaN(undefined); // restituisce vero per 'undefined'

Nello standard ES6. il metodo isNaN() è aggiunto all'oggetto globale Number. Questo metodo è molto più affidabile e pertanto è quello preferito.

Number.isNaN(0/0); // restituisce true
Number.isNaN(undefined); // restituisce false

Un altro aspetto interessante di  NaN è che l'unico valore di JavaScript che non è mai uguale a nessun altro valore, incluso se stesso. Pertanto questo è un altro metodo per rilevare NaN dove lo standard ES6 non è supportato:

function isNaN (input) {
  return input !== input;
}

Come rilevare null in JavaScript

Abbiamo visto come rilevare null usando l'operatore typeof generi confusione. Il metodo preferito per verificare se qualche valore è uguale a null è utilizzare un operatore di uguaglianza stretta (===).

function isNull(input) {
 return input === null;
}

Accertati di non utilizzare l'operatore di uguaglianza generico == per errore. Usare  == al posto di  === fornirà un risultato fuorviante.

Come rilevare un array in JavaScript

Dall'introduzione dello standard ES6, possiamo rilevare un array utilizzando il metodo Array.isArray .

Array.isArray([]); // restituisce vero
Array.isArray({}); // restituisce falso

Prima di ES6, potevamo usare l'operatore instanceof  per identificare un array:

function isArray(input) {
  return input instanceof Array;
}

Una soluzione generale al controllo del tipo dei dati in JavaScript

Esiste un modo con cui possiamo creare una soluzione generale al problema del controllo del tipo dei dati. Diamo un occhiata al metodo Object.prototype.toString. Questo metodo è molto potente ed estremamente utile per implementare codice apposito per il controllo di tipo.

Quando Object.prototype.toString viene invocato utilizzando call() o apply(), questo restituisce il tipo dell'oggetto nel formato: [object Tipo]. La parte Tipo nel valore restituito costituisce il tipo di dato effettivamente ricercato.

Diamo un'occhiata a come funziona con qualche esempio:

// restituisce '[object Array]'
Object.prototype.toString.call([]); 

// restituisce '[object Date]'
Object.prototype.toString.call(new Date()); 

// restituisce '[object String]'
Object.prototype.toString.call(new String('freeCodeCamp'));

// restituisce '[object Boolean]'
Object.prototype.toString.call(new Boolean(true));

// restituisce '[object Null]'
Object.prototype.toString.call(null);

Questo significa che se prendiamo la stringa restituita ed estraiamo la parte Tipo, avremo il tipo di dato effettivo. Qui riporto un tentativo di implementare quanto appena detto:

function typeCheck(value) {
  const return_value = Object.prototype.toString.call(value);
  // possiamo usare anche le espressioni regolari per fare questo...
  const type = return_value.substring(
           return_value.indexOf(" ") + 1, 
           return_value.indexOf("]"));

  return type.toLowerCase();
}

Ora possiamo usare la funzione typeCheck per rilevare i tipi di dato:

typeCheck([]); // 'array'
typeCheck(new Date()); // 'date'
typeCheck(new String('freeCodeCamp')); // 'string'
typeCheck(new Boolean(true)); // 'boolean'
typeCheck(null); // 'null'

Riassumendo

Per riassumere quanto abbiamo imparato in questo articolo:

• In JavaScript il controllo del tipo dei dati non è così rigoroso come in altri linguaggi di programmazione.
• Utilizzo dell'operatore  typeof per rilevare i tipi di dato.
• Ci sono due varianti della sintassi per l'operatore typeof: typeof e typeof(espressione).
• Il risultato dell'operatore typeof può essere fuorviante a volte. In questi casi dobbiamo necessariamente affidarci ad altri metodi disponibili (Number.isNaN,  Array.isArray, e così via).
• Possiamo usare Object.prototype.toString per creare un metodo generico per il controllo del tipo di dato.

Prima di terminare...

Grazie per aver letto questo articolo! Connettiamoci! Puoi taggarmi nei commenti su Twitter (@tapasadhikary).

Potrebbero interessarti anche questi articoli:

• JavaScript undefined and null: Let's talk about it one last time! (inglese)
• JavaScript: Equality comparison with ==, === and Object.is (inglese)
• La Parola Chiave `this` in Javascript + 5 Regole Chiave di Binding Spiegate per Principianti di JS

È tutto per ora. Ci rivediamo con il mio prossimo articolo. A presto!

È possibile utilizzare JavaScript per controllare se la tua app è connessa ad internet?

In questo articolo, ti fornirò una risposta aggiornata a questa domanda.

La soluzione farà uso dell'API Fetch di Javascript e della programmazione asincrona con il costrutto Async & Await. Prima però, diamo un'occhiata ad un approccio comunemente accettato e vediamo perché potrebbe non essere la scelta migliore da implementare nella tua applicazione.

navigator.onLine

La proprietà "online" dell'interfaccia navigator, navigator.onLine, è utilizzata frequentemente per rilevare lo stato online/offline del browser.

Combinata con i listener per gli eventi online ed offline, sembra fornire agli sviluppatori una soluzione semplice e facile da implementare.

Diamo un'occhiata a come implementare navigator.onLine

Iniziamo aggiungendo un event listener all'evento "load". Quando l'evento "load" viene attivato, il listener controlla la proprietà "online" dell'interfaccia "navigator" e quindi mostra lo stato della connessione.

La proprietà "online" di navigator fornisce una risposta booleana (vero o falso). Per terminare l'azione del listener, utilizzeremo un operatore ternario per impostare il valore dell'elemento DOM che mostra lo stato della connessione.

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

Ma perché la parola "navigator" (navigatore)? È un riferimento al browser Netscape Navigator in uso negli anni '90.

Posiziona un elemento h1 al centro nella tua pagina HTML con l'id "status".  Se applichi il codice JavaScript riportato qui sopra alla tua pagina, dovresti vedere comparire il testo "Online".

Tuttavia questo aggiorna solamente l'elemento h1 quando la pagina viene caricata. Proviamo ad aggiungere dei listener per gli eventi offline e online che aggiornano il display dello stato ogni volta che l'uno o l'altro evento viene attivato.

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

Puoi andare alla scheda Applicazione degli strumenti Chrome per sviluppatori (Chrome Dev Tools > Application Tab )  e cliccare su ServiceWorker per impostare il browser in modo che risponda come se fosse offline.

Seleziona e deseleziona la checkbox Offline alcune volte. Dovresti vedere il display di stato rispondere immediatamente agli eventi offline e online che sono stati attivati.

Andiamo un po' più a fondo

A prima vista, quanto riportato sopra sembra una buona soluzione, oltre che abbastanza semplice. Sfortunatamente, se leggiamo qualcosa in più nella documentazione della proprietà "online" di navigator e sugli eventi online/offline, troviamo che c'è un problema.

Una ricerca di navigator.online su CanIUse.com mostra il supporto diffuso fornito dai browser alla proprietà per lo stato online | offline. Tuttavia, guardano alle note riportate sotto la tabella relativa al supporto nelle diverse versioni, possiamo leggere:

“Online non significa sempre connessione ad Internet. Può anche significare connessione a qualche rete”.

Mmh, questo ci mette un po' i bastoni tra le ruote.

Così, se volessi veramente determinare lo stato online del browser, dovresti sviluppare metodi addizionali per la questa verifica.

Diamo anche un'occhiata al riferimento sulla documentazione MDN per navigator.onLine.

“I browsers implementano questa proprietà in modo differente...non si può assumere che un valore true significhi necessariamente che il browser abbia accesso ad internet. Si potrebbe incorrere in falsi positivi...”

Questo conferma i nostri timori nell'utilizzare la proprietà online di navigator come soluzione per verificare la connessione Internet. È una soluzione che può devastare la nostra applicazione se questa dipende dalla conoscenza di quando delle sorgenti esterne di dati sono disponibili.

Uno di tali esempi è quando proviamo a determinare se una Web App Progressiva (Progressive Web App o PWA) sia online oppure no. MDN raccomanda persino,

“...se realmente si vuole determinare lo stato della connessione del browser, si dovrebbero sviluppare metodi addizionali di verifica.”

Una ricerca rapida nel web per "navigator online non funziona" (“navigator online not working”) fornisce diversi post nei forum di chi ha riscontrato problemi dipendendo da questa proprietà.

Allora, qual è la soluzione?

Ci serve sapere quando la nostra applicazione è realmente connessa a Internet e non solamente ad un router o una rete locale. Torniamo al nostro file JavaScript e ricominciamo da capo.

L'idea è fare una richiesta HTTP e trattarla elegantemente gestendo gli errori se questa fallisce. Se la richiesta ha successo, siamo online, mentre se fallisce, non lo siamo.

Richiederemo una piccola immagine a un intervallo temporale predefinito per determinare lo stato online. Il moderno linguaggio JavaScript fornisce l'API Fetch e la programmazione asincrona con il costrutto Async & Await. Utilizzeremo questi strumenti per portare a termine il nostro obiettivo.

La funzione checkOnlineStatus()

Iniziamo creando una funzione freccia asincrona denominata checkOnlineStatus. La funziona restituirà vero o falso come la proprietà online di navigator.

All'interno della funzione, impostiamo un blocco try dove attendiamo una richiesta fetch per una immagine da 1 pixel. Assicurati che il tuo service worker non stia salvando questa immagine nella cache.

Un codice di risposta HTTP tra 200 e 299 indica che la richiesta ha avuto successo, pertanto forniremo il risultato del confronto sul codice di stato. Questo sarà vero se lo stato della risposta è compreso tra 200 e 299 e falso per gli altri valori.

Inoltre dobbiamo fornire un blocco catch che intercetti l'errore se la richiesta fallisce. La funzione ritornerà falso all'interno del blocco catch per indicare che siamo veramente offline, qualora accadesse.

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // può essere vera o falsa
  } catch (err) {
    return false; // sicuramente offline
  }
};

Come prossimo passo, utilizzeremo il metodo setInterval e lo passeremo ad una funziona async anonima. La funzione async attenderà il risultato della nostra funzione checkOnlineStatus. Utilizzeremo quindi un operatore ternario con tale risultato per mostrare lo stato corrente della connessione.

Per testare questo esempio, imposta l'intervallo temporale ad ogni 3 secondi (3'000 millisecondi). Ma così è troppo frequente. Controllare ogni 30 secondi (30'000 millisecondi) potrebbe essere sufficiente per le tue effettive necessità.

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probabilmente troppo frequente, usa 30'000  per controllare ogni 30 secondi

Con il nostro nuovo codice salvato, torniamo alla scheda Application negli strumenti per sviluppatori di Chrome per testare la risposta quando siamo offline.

Ho quasi dimenticato di includere il listener dell'evento "load" con funzionalità asincrona! Il rilevamento dell'evento "load" è importante forse nell'unico caso in cui si abbia una Web App Progressiva che utilizzi un service worker per essere disponibile in modalità offline. In caso contrario, la tua pagina web o la tua web app semplicemente non viene caricata senza una connessione.

Ecco qui il nuovo listener dell'evento load:

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

Una considerazione finale

Il codice riportato sopra con le richieste HTTP effettuate ad intervalli prestabiliti va bene per mostrare lo stato della connessione della tua App. Detto questo, non suggerisco di affidarsi ad uno stato di connessione che viene controllato 20 o 30 secondi prima di effettuare una richiesta di dati critica nella tua applicazione.

In questo caso, dovresti invocare la funzione checkOnlineStatus direttamente prima della richiesta e valutare la risposta prima di richiedere i dati.

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

Conclusioni

Anche se navigator.onLine è ampiamente supportato nei diversi browser, fornisce risultati inaffidabili quando è necessario determinare se la nostra applicazione è realmente connessa a Internet. Utilizzando l'API Fetch e la programmazione asincrona in Javascript, possiamo rapidamente programmare una soluzione più affidabile.

Qui c'è un link al code gist su GitHub, e qui c'è un video tutorial che ho realizzato (video in lingua originale):

Alcuni mesi fa, ho deciso di rilasciare Caer, un pacchetto (package) per la visione artificiale (computer vision) disponibile in Python. Ho trovato l'intero processo estremamente complicato e frustrante. Probabilmente puoi immaginarne il motivo: documentazione scarsa (e confusa), mancanza di buoni tutorial, e così via.

Ho così deciso di scrivere questo articolo nella speranza di aiutare chi sta affrontando le stesse difficoltà nel creare un package in Python. Realizzeremo un modulo molto semplice e lo renderemo disponibile a chiunque in tutto il mondo.  

Il contenuto di questo modulo segue una struttura molto basilare. In totale sono riportati quattro file Python, ciascuno dei quali contiene un singolo metodo. Per questo tutorial adottiamo appositamente uno schema molto semplice.

base-verysimplemodule  --> Cartella base
└── verysimplemodule   --> Modulo effettivo
    ├── extras
    │   ├── multiply.py
    │   ├── divide.py
    ├── add.py
    ├── subtract.py

Puoi notare che abbiamo una cartella chiamata  verysimplemodule, la quale, a sua volta, contiene i due file Python add.py e subtract.py. C'è anche una sottocartella chiamata extras (che contiene i file multiply.py e divide.py). La cartella verysimplemodule costituirà la base del nostro modulo Python.

Creare i file __ init __.py

Una cosa che si trova sempre in qualsiasi package di Python è un file  __init__.py. Questo file comunica a Python di considerare le cartelle come moduli (o sotto-moduli).

Molto semplicemente, questo file conserva i nomi di tutti i metodi contenuti in tutti i file Python che si trovano nella sua stessa cartella.

Un tipico file __init__.py ha il seguente formato:

from file import method 

# 'method' è un funzione presente nel file denominato 'file.py'

Per creare un package in Python, occorre aggiungere un file __init__.py  in ogni sottocartella del tuo package. Queste sottocartelle diventano i sottomoduli del tuo package.

Nel nostro caso, aggiungiamo i nostri file __init__.py alla cartella del modulo effettivo, denominata verysimplemodule, in questo modo:

from add import add
from subtract import subtract

e facciamo lo stesso per la sottocartella extras, in questo modo:

from multiply import multiply
from divide import divide

Una volta fatto questo, siamo praticamente a metà dell'opera!

Come impostare il file setup.py

All'interno della cartella base-verysimplemodule (e nella stessa cartella del nostro modulo verysimplemodule), dobbiamo aggiungere il file setup.py. Questo file è essenziale se si intende effettuare il build del modulo in questione.

Nota: si può nominare il file setup.py a piacimento. Questo file non deve avere un nome specifico, a differenza del file __init__.py.

Alcune possibili scelte per il nome possono essere setup_my_very_awesome_python_package.py e python_package_setup.py, ma di solito è buona pratica utilizzare setup.py.

Il file setup.py conterrà informazioni sul tuo package, specificamente il nome del package, la sua versione, le dipendenze dalle diverse piattaforme e molto altro.

Per i nostri scopi, non sono richieste meta-informazioni avanzate, così il seguente codice dovrebbe andare bene per la maggior parte dei pacchetti che creerai:

from setuptools import setup, find_packages

VERSION = '0.0.1' 
DESCRIPTION = 'Il mio primo package in Pyhton'
LONG_DESCRIPTION = 'Il mio primo package in Python con una descrizione un po più lunga'

# Impostazioni
setup(
       # il nome deve essere uguale a quello della cartella 'verysimplemodule'
        name="verysimplemodule", 
        version=VERSION,
        author="Jason Dsouza",
        author_email="<youremail@email.com>",
        description=DESCRIPTION,
        long_description=LONG_DESCRIPTION,
        packages=find_packages(),
        install_requires=[], # aggiungi qualsiasi package addizionale che 
        # deve essere installato insieme al tuo package. Ad Es. 'caer'
        
        keywords=['python', 'first package'],
        classifiers= [
            "Development Status :: 3 - Alpha",
            "Intended Audience :: Education",
            "Programming Language :: Python :: 2",
            "Programming Language :: Python :: 3",
            "Operating System :: MacOS :: MacOS X",
            "Operating System :: Microsoft :: Windows",
        ]
)

Una volta fatto questo, possiamo lanciare il seguente comando nella stessa cartella di base-verysimplemodule:

python setup.py sdist bdist_wheel

Questo comando permetterà di effettuare il build di tutti i pacchetti necessari richiesti da Python. Il comandi sdist e bdist_wheel permettono di creare una distribuzione sorgente (source distribution) e una distribuzione binaria in formato wheel (.whl) che potrai successivamente caricare su PyPi.

PyPi — eccoci arrivati!

PyPi è l'archivio ufficiale di Python dove sono conservati tutti i package Python. Si può considerarlo un pò come il Github per i Package di Python.

Per rendere il tuo package disponibile agli utenti in tutto il mondo, devi attivare un account PyPi.

Fatto ciò, saremo pronti per caricare il nostro package su PyPi. Ricordi la distribuzione sorgente e la distribuzione binaria Wheel che sono state costruite quando è stato lanciato il comando python setup.py? Bene, è proprio ciò che verrà effettivamente caricato su PyPi.

Ma prima di fare tutto questo, devi installare twine se non lo hai già installato. L'operazione è molto semplice e si esegue lanciando il comando pip install twine.

Come caricare il tuo package su PyPi

Assumendo di avere installato twine , procediamo lanciando il seguente comando:

twine upload dist/*

Questo comando caricherà i contenuti della cartella dist, che è stata generata automaticamente quando abbiamo lanciato il comando python setup.py. Verrà visualizzato un prompt che chiederà lo username e la password dell'account PyPi, quindi procediamo ed inseriamoli come richiesto.

A questo punto, se hai seguito questo tutorial alla lettera, potresti ottenere un errore del tipo il repository è già esistente.

Questo accade di solito perché c'è un conflitto tra i nomi del tuo package e di un package già esistente. In altre parole, cambia il nome del tuo package - quel nome è già stato utilizzato.

Ed è tutto!

Per installare orgogliosamente il tuo modulo tramite pip, avvia un terminale e lancia il comando:

pip install <nome_package> 

# nel nostro caso:
pip install verysimplemodule

Osserva come Python installa accuratamente il tuo package dai file binari che sono stati generati prima.

Apri una shell interattiva di Python e prova ad importare il tuo package:

>> import verysimplemodule as vsm

>> vsm.add(2,5)
7
>> vsm.subtract(5,4)
1

Per accedere ai metodi per divisione emoltiplicazione ( ricordi che erano in una sottocartella chiamata extras?), lancia il comandi:

>> import verysimplemodule as vsm

>> vsm.extras.divide(4,2)
2
>> vsm.extras.multiple(5,3)
15

È proprio così semplice.

Congratulazioni! Hai appena creato il tuo primo package in Python. Anche se molto semplice, il tuo package è adesso disponibile per il download da chiunque in tutto il mondo (premesso che abbia Python, ovviamente).

Qual è il prossimo passo?

Test PyPi

Il package che abbiamo usato in questo tutorial era un modulo estremamente semplice - le operazioni matematiche basilari di addizione, sottrazione, moltiplicazione e divisione. Non ha senso caricarlo direttamente in PyPi specialmente se lo stai provando per la prima volta.

Fortunatamente per noi, esiste Test PyPi, una istanza separata di PyPi dove puoi testare e sperimentare il tuo pacchetto (è necessario iscriverti ad un account separato sulla piattaforma).

Il processo da seguire per caricare su Test PyPi è praticamente lo stesso, con qualche piccola modifica.

# Il seguente comando caricherà il package su Test PyPi
# Ti verrà chiesto di fornire le tue credenziali di accesso a Test PyPi

twine upload --repository testpypi dist/*

Per scaricare progetti da Test PyPi:

pip install --index-url "https://test.pypi.org/simple/<nome_package>"

Meta-informazioni avanzate

Le meta-informazioni che abbiamo usato nel file setup.py erano molto basilari. Puoi aggiungere ulteriori informazioni come manutentori multipli (se ci sono), email dell'autore, informazioni sulla licenza ed un gran numero di altri dati.

Questo articolo si rivelerà particolarmente utile se intendi farlo.

Dai un'occhiata ad altri repository

Vedere come gli altri repository hanno costruito i loro pacchetti si può rivelare molto utile.

Mentre realizzavo Caer, osservavo costantemente come Numpy e Sonnet impostavano il loro pacchetti. Raccomanderei di dare un'occhiata ai repository di Caer, Numpy e Tensorflow se stai pianificando di realizzare pacchetti leggermente più avanzati.