Se stai scrivendo in una lingua diversa dal solito, probabilmente potresti aver bisogno di conoscere il modo per digitare delle lettere con accenti o segni diacritici non presenti sulla tastiera, come in über, crêpe o español.

Fortunatamente ci sono un paio di modi semplici per farlo su un Mac. In quest'articolo, esamineremo i metodi principali in modo che tu possa includere facilmente gli accenti in quello che scrivi.

Il metodo "tieni premuto" su Mac

Se non sei di fretta e vuoi vedere tutte le opzioni comuni degli accenti in un colpo d'occhio, c'è un modo molto semplice per farlo.

Puoi semplicemente tenere premuto il tasto di cui vuoi vedere gli accenti e ti verranno mostrate svariate opzioni al di sopra della lettera, in questo modo:

Quando vedi il tipo di accento di cui hai bisogno, digita il numero corrispondente e l'accento verrà aggiunto alla lettera. Puoi anche usare le frecce sinistra/destra (e invio) per selezionare quello che desideri.

Quindi, per esempio, se vuoi aggiungere la seconda delle opzioni qui sopra, dovrai tenere premuto il tasto "e" e poi digitare "2" (o premere la freccia destra una volta e poi invio).

Questo metodo funziona bene se non ti interessa il tempo che ci vuole al menu per comparire. Tuttavia, non sono sempre inclusi tutti gli accenti di ogni lingua e rallenta il tuo ritmo, soprattutto se stai scrivendo un intero articolo pieno di accenti. È un bel po' di tempo in più.

Fortunatamente c'è un altro metodo comune che sfrutta delle scorciatoie da tastiera e che ti offre ugualmente tutte le opzioni.

Il metodo del tasto Option su Mac

Il tasto Option ti aiuta ad aggiungere a un testo tutti i tipi di accenti e segni diacritici. Tieni premuto il tasto Option, poi premi il tasto "e", rilasciali e premi il tasto della lettera a cui vuoi aggiungere l'accento.

Ad esempio, se vuoi aggiungere un accento acuto (´) alle lettere a, e, i, o, u, devi premere Option + e, e poi la lettera a cui vuoi aggiungere l'accento. Ad esempio, Option + e + a ti dà "á".

E se hai bisogno di un tipo diverso di accento, come un accento grave o una dieresi? Non preoccuparti – ci sono combinazioni del tasto Option per questo e altro.

Lettere minuscole

• Option + i + lettera = â, ê, î, ô, û
• Option + n + lettera = ñ, ã, õ
• Option + u + lettera = ä, ë, ï, ö, ü, ÿ
• Option + ` + lettera = à, è, ì, ò, ù
• Option + a = å
• Option + ' = æ
• Option + q = œ
• Option + o = ø
• Option + c = ç

Lettere maiuscole

• Option + Shift + W = À
• Option + Shift + A = Å
• Option + Shift + E = È
• Option + Shift + V = É
• Option + Shift + R = Ì
• Option + Shift + T = Ò
• Option + Shift + U = Ù
• Option + Shift + ' = Æ
• Option + Shift + Q = Œ
• Option + Shift + O = Ø
• Option + Shift + C = Ç

Simboli

• Option + 1 = ¡
• Option + Shift + ? = ¿
• Option + 5 = ∞

Una volta che hai memorizzato queste combinazioni puoi incorporare ognuna di esse nel tuo flusso di scrittura tipico. E puoi sempre mettere un segnalibro a questo articolo se dovessi dimenticarle 🙂.

Bonus: altre combinazioni con il tasto Option su Mac

E se hai bisogno di usare dei simboli matematici? O il simbolo dell'Euro? Avrai bisogno di qualcosa in più delle opzioni per gli accenti.

Lo sapevi che la tua tastiera base nasconde tutti questi caratteri in (quasi) piena vista?

Tenendo premuto il tasto Option e premendo una qualsiasi lettera/numero/segno di punteggiatura, puoi ottenere dei caratteri completamente diversi da ciò che vedi sulla tua tastiera.

Quindi come fai a sapere quale combinazione di tasti premere? Non preoccuparti – il tuo Mac conosce la risposta. Occorrono solo pochi passaggi per ottenere questa informazione.

Step 1: Vai alle Preferenze di Sistema

Trova l'icona Apple nell'angolo in alto a sinistra e cliccaci su. Poi seleziona "Preferenze di Sistema" dal menu a tendina.

Seleziona l'icona della tastiera e vedrai questo riquadro:

Assicurati che l'opzione "Mostra i visori tastiera e emoji nella barra dei menu" sia selezionata.

Step 2: Clicca sull'icona della tastiera nella barra del menu

Vedrai una piccola icona di una tastiera nella barra del menu in alto, proprio vicino ai simboli del bluetooth e del wifi. Cliccaci su e seleziona "Mostra visore tastiera".

Si aprirà un'immagine della tastiera nel modo in cui è configurata sul tuo Mac:

Step 3: Premi il tasto Option

Adesso, se tieni premuto il tasto Option, potrai vedere cos'altro sono in grado di fare i tasti, così:

Puoi vedere i segni diacritici più comuni evidenziati in arancione nell'immagine qui sopra. Questi sono i tasti che quando combinati col tasto Option ti permettono di scrivere i caratteri che abbiamo visto nella sezione precedente.

Vedrai anche che ci sono altri simboli utili, come simboli di valute, simboli matematici e via dicendo. Quindi se hai bisogno di rinfrescarti velocemente la memoria sul tasto da premere, ad esempio, per la lettera greca µ (mu), puoi vedere questa immagine.

Come aggiungere accenti e segni diacritici con la Tastiera Internazionale su Windows

Se vuoi usare delle scorciatoie per aggiungere accenti e caratteri speciali con semplici combinazioni di tasti (senza usare i codici Alt), puoi abilitare la tastiera internazionale.

Prima di tutto, premi il tasto Windows, digita "Lingua" e clicca su "Impostazioni di lingua" per aprire il menu:

Nel menu "Lingue preferite" clicca su "Italiano" e poi "Opzioni" per aprire il menu "Opzioni di lingua":

Sotto "Tastiere", clicca sul pulsante "Aggiungi tastiera" e scegli "Americano internazionale" per aggiungere la tastiera internazionale al tuo sistema.

Per abilitare la tastiera internazionale, sposta il mouse sulla barra delle applicazioni, clicca su "ITA IT" e poi clicca su "ITA INTL":

Alternativamente, tieni premuto il tasto Windows e poi premi la barra spaziatrice per cambiare il layout della tastiera con le altre tastiere installate.

La differenza principale tra la tastiera italiana e quella internazionale è che non sono presenti le lettere accentate e i segni di punteggiatura sono in tasti diversi. Però puoi avere accesso in maniera semplice a tante altre lettere accentate.

Qui sotto puoi vedere la tastiera qwerty italiana classica, e la tastiera qwerty internazionale.

Nella tastiera internazionale alcuni tasti hanno una funzione di "blocco dei caratteri accentati", questi sono detti tasti morti.

Per esempio, per digitare un singolo apostrofo (') con la tastiera internazionale, digita l'apostrofo (', il tasto à nella tastiera italiana) e poi la barra spaziatrice. Se invece digiti una lettera dopo aver premuto il tasto apostrofo, otterrai quella lettera accentata (á, é, í, ó, ú, ý).

Detto ciò, ecco come puoi digitare alcuni accenti o segni diacritici comuni con la tastiera internazionale di Windows 10 (accanto a ogni simbolo puoi trovare scritto come ottenerlo guardando i simboli scritti sulla tastiera):

Inoltre, premendo AltGr hai accesso a svariati altri simboli che non sono normalmente accessibili, come puoi vedere nella tastiera qui sotto.

Ad esempio, puoi usare le seguenti combinazioni di tasti:

Nota: le combinazioni sono scritte tenendo conto dei simboli della tastiera italiana.

• AltGr + w = å
• AltGr + Shift + W = Å
• AltGr + z = æ
• AltGr + Shift + Z = Æ
• AltGr + , = ç
• AltGr + Shift + , = Ç
• AltGr + l = ø
• AltGr + Shift + L = Ø
• AltGr + - = ¿
• AltGr + 1 = ¡

Potresti avere notato che non è possibile digitare alcune cose come œ, Œ, o ∞ con la tastiera internazionale.

Per questi simboli, vediamo un altro metodo per digitare accenti, segni diacritici, caratteri speciali e simboli su Windows 10.

Come aggiungere accenti e segni diacritici su Windows con il pannello emoji

Il pannello emoji rende facile scorrere tra tutte le emoji disponibili e aggiungerne una a un messaggio. Ma puoi anche usare il pannello emoji per aggiungere velocemente caratteri speciali.

Usa la scorciatoia da tastiera Win + . per aprire il pannello:

Per aggiungere accenti o caratteri speciali, usa il pulsante simboli in cima:

Poi scorri nel menu e premi sull'accento o carattere che vuoi:

Puoi anche premere i diversi simboli del menu in basso per vedere diversi tipi di simboli. Per esempio,  ∞ si trova nella sezione "Simboli matematici":

E con questo, dovresti sapere tutto quello di cui hai bisogno per digitare accenti e altri caratteri speciali sia su Mac che su Windows. ¡Adiós!

Se hai mai usato Node.js, hai usato di sicuro npm.

npm (node package manager - gestore di pacchetti di node) è il gestore di dipendenze/pacchetti che è in dotazione con l'installazione di Node.js. Fornisce agli sviluppatori un modo di installare pacchetti sia globalmente che localmente.

Qualche volta potresti voler esaminare uno specifico pacchetto e provare dei comandi. Ma non puoi farlo senza installare la dipendenza nella cartella locale node_modules.

È qui che entra in gioco npx.

In questo articolo daremo un'occhiata alla differenza tra npm e npx e impareremo come ottenere il meglio da entrambi.

Per prima cosa, capiamo cosa è effettivamente npm e per cosa possiamo utilizzarlo.

Il gestore di pacchetti npm

npm è, innanzitutto, un repository online per la pubblicazione di progetti Node.js open source.

In secondo luogo, è uno strumento per riga di comando che ti aiuta a installare dei pacchetti e gestire le loro versioni e dipendenze. Ci sono centinaia di migliaia di librerie e applicazioni Node.js su npm e molte altre sono aggiunte ogni giorno.

npm non esegue nessun pacchetto per conto suo. Se vuoi eseguire un pacchetto usando npm, devi specificarlo nel tuo file package.json.

Quando gli eseguibili sono installati con i pacchetti npm, npm crea dei link ad essi:

• le installazioni locali hanno i link creati nella cartella ./node_modules/.bin/.
• le installazioni globali hanno i link creati dalla cartella globale bin/ (per esempio /usr/local/bin su Linux o %AppData%/npm su Windows)

Per eseguire un pacchetto usando npm devi scrivere il percorso locale, così:

$ ./node_modules/.bin/tuo-pacchetto

oppure puoi eseguire un pacchetto installato localmente aggiungendolo nel tuo file package.json nella sezione scripts, in questo modo:

{
  "name": "la-tua-applicazione",
  "version": "1.0.0",
  "scripts": {
    "il-tuo-pacchetto": "il-tuo-pacchetto"
  }
}

Puoi quindi eseguire lo script usando npm run:

npm run il-tuo-pacchetto

Puoi vedere che eseguire un pacchetto con npm richiede un po' di cerimonie.

Fortunatamente, è proprio qui che npx si mostra utile.

L'esecutore di pacchetti npx

Fin dalla versione 5.2.0 di npm, npx è installato assieme a npm. Quindi è praticamente uno standard al giorno d'oggi.

npm è anche uno strumento per la riga di comando il cui proposito è rendere più semplice installare e gestire le dipendenze ospitate nel registro npm.

Adesso, è molto semplice eseguire ogni sorta di eseguibile basato su Node.js che dovresti installare normalmente con npm.

Puoi eseguire il seguente comando per sapere se npx è già installato nella tua versione attuale di npm.

$ which npx

Se non lo è puoi installarlo con questo comando:

$ npm install -g npx

Adesso che ti sei assicurato che è installato, vediamo alcuni dei casi che rendono npx estremamente utile.

Eseguire con facilità un pacchetto installato localmente

Se desideri eseguire un pacchetto installato localmente, tutto quello che devi fare è scrivere:

$ npx il-tuo-pacchetto

npx controlla se il <comando> / <pacchetto> è presente in $PATH, o nei binari del progetto locale, e se lo è lo esegue.

Eseguire pacchetti non installati precedentemente

Un altro grande vantaggio è l'abilità di eseguire un pacchetto che non è stato installato precedentemente.

Testiamolo eseguendo:

$ npx cowsay wow	

È fantastico perché a volte vuoi usare degli strumenti della riga di comando, ma non vuoi installarli globalmente solo per testarli.

Questo significa che puoi risparmiare un po' di spazio sul disco e semplicemente eseguirli quando ti serve. Inoltre, le tue variabili globali saranno meno inquinate.

Eseguire il codice direttamente da GitHub

Puoi usare npx per eseguire qualsiasi gist o repo da GitHub. Concentriamoci sull'esecuzione di un gist su GitHub perché è più facile crearne uno.

Lo script più semplice consiste in un file JS principale e un package.json. Dopo che hai sistemato i file, tutto quello che devi fare è eseguire npx con il link al gist come mostrato nell'immagine qui sopra.

Qui puoi trovare il codice che ho usato per questo esempio.

Assicurati di leggere accuratamente qualsiasi script prima di eseguirlo per evitare problemi seri che possono insorgere per del codice dannoso.

Testare diverse versioni dei pacchetti

npx rende molto semplice testare diverse versioni di pacchetti o moduli Node.js. Per testare questa fantasmagorica funzionalità, installeremo localmente il pacchetto create-react-app e testeremo una versione next.

Questo comando elencherà delle tag dist verso la fine dell'output. Le tag dist forniscono alias per i numeri di versione rendendo il tutto più facile da digitare.

$ npm v create-react-app

Usiamo npm per provare la tag dist next di create-react-app che creerà la app dentro una cartella chiamata sandbox.

$ npx create-react-app@next sandbox

npx installa temporaneamente la versione next di create-react-app e poi la esegue per creare lo scheletro dell'app e installare le sue dipendenze.

Una volta installata, possiamo navigare all'app con:

$ cd sandbox

ed attivarla con questo comando:

$ npm start

Aprirà automaticamente l'app React in una finestra nel tuo browser di default.

Ora abbiamo una app eseguita sulla versione next del pacchetto create-react-app!

In conclusione

npx aiuta ad evitare versioni multiple, problemi di dipendenze e aiuta a installare pacchetti non necessari che vogliamo solo provare.

Fornisce anche un modo chiaro e semplice di eseguire pacchetti, comandi, moduli e perfino repo e gist da GitHub.

Se non hai mai usato npx prima d'ora, questo è un buon momento per iniziare!

Quando impari a programmare, prima o poi avrai a che fare con i sistemi di controllo di versione. E anche se ci sono molti strumenti disponibili in questo campo, soltanto uno di essi è lo standard usato da praticamente chiunque nell'industria. È così popolare che ci sono aziende che ne usano il nome nei loro marchi. Parliamo di Git, ovviamente.

Anche se Git è uno strumento potente, il suo potere è ben nascosto. Ci sono alcuni concetti essenziali che hai bisogno di capire per diventare competente con Git. La buona notizia è che una volta che li impari, ti capiterà raramente di incappare in guai da cui non puoi uscire.

La procedura tipo

In un tipico procedimento di Git, userai un repository locale, un repository remoto e uno o più branch. I repository immagazzinano le informazioni sul progetto, tra cui la sua storia completa e i suoi branch. Un branch è in pratica una collezione di cambiamenti, dal progetto vuoto allo stato attuale.

Dopo aver clonato un repository, lavori sulla copia locale e introduci i nuovi cambiamenti. Fino a che non fai il push dei cambiamenti che hai fatto in locale al repository remoto, tutto il tuo lavoro è disponibile solo sulla tua macchina.

Quando finisci una attività, è ora di sincronizzare il tuo repository remoto, facendo il pull dei cambiamenti in remoto per mantenerti in pari con i progressi del progetto, e facendo il push dei cambiamenti in locale per condividere il tuo lavoro con gli altri.

Cambiamenti in locale

Va tutto bene finché tu e il resto del team state lavorando su file completamente separati. Qualsiasi cosa accada, non vi pesterete i piedi.

Però, a volte capita che tu e il tuo team introduciate simultaneamente cambiamenti nello stesso posto. Ed è lì che iniziano i guai.

Hai mai eseguito un git pull solo per vedere il temuto error: Your local changes to the following files would be overwritten by merge:? Prima o poi, a tutti capita questo problema.

Quello che crea più confusione qui è che non vuoi fare merge, solo pull, giusto? In realtà, pull è un po' più complicato di quello che potresti pensare.

Come funziona esattamente Git Pull?

pull non è una singola operazione. In realtà, viene prima eseguito un fetch, ottenendo i metadati che descrivono i commit, e poi il merge aggiungendo quei commit al repository locale. Queste due operazioni possono essere eseguite manualmente se vuoi:

git fetch
git merge origin/$BRANCH_ATTUALE

La parte origin/$BRANCH_ATTUALE significa che:

• Git aggiungerà al branch i cambiamenti dal repository remoto origin (quello da cui hai clonato il repository locale)
• che sono stati apportati al branch $BRANCH_ATTUALE
• che non sono già presenti nel branch locale di cui hai fatto il checkout

Visto che git fa il merge solo se non ci sono cambiamenti senza commit, ogni volta che fai git pull con cambiamenti che non hai aggiunto ad un commit potresti incappare in qualche guaio. Fortunatamente ci sono modi per tirartene fuori!

Approcci diversi

Quando hai cambiamenti locali senza commit e vuoi comunque fare il pull della nuova versione dal server remoto, la tua situazione in genere cade in uno dei seguenti scenari:

• non ti interessano i cambiamenti locali e vuoi sovrascriverli,
• ti importano tanto e vuoi applicarli dopo i cambiamenti dal remoto,
• vuoi scaricare i cambiamenti da remoto ma non applicarli per ora

Ognuno di questi approcci richiede una diversa soluzione.

Non ti interessano i cambiamenti locali

In questo caso vuoi semplicemente annullare i cambiamenti locali. Forse hai cambiato i file per sperimentare ma non ti serve più tale modifica. Quello che ti interessa è essere in pari con l'upstream.

Questo significa che aggiungi uno step in più tra il fetch e il merge. Questo step resetta il branch al suo stato non modificato, permettendo a git merge di funzionare.

git fetch
git reset --hard HEAD
git merge origin/$BRANCH_ATTUALE

Se non vuoi scrivere il nome del branch ogni volta che lo esegui, Git ha una abbreviazione che punta al branch upstream: @{u}. Un branch upstream è il branch nel repository remoto a cui fai push e dai cui fai fetch.

Ecco come appare il comando precedente con l'abbreviazione:

git fetch
git reset --hard HEAD
git merge '@{u}'

Mettiamo le virgolette attorno alla abbreviazione nell'esempio per prevenire che lo shell lo interpreti.

Ti importa tanto dei cambiamenti locali

Quando i tuoi cambiamenti locali sono importati per te, ci sono due opzioni: puoi salvarli in un commit e poi fare git pull, oppure puoi salvarli nello stash.

Salvarli nello stash significa mettere i cambiamenti da parte per un momento, per poi recuperarli più tardi. Per essere più precisi, git stash crea un commit che non è visibile nel tuo branch corrente, ma è comunque accessibile da Git.

Per recuperare i cambiamenti salvati nell'ultimo stash, puoi usare git stash pop. Dopo aver applicato i cambiamenti stashati, questo comando rimuove anche il commit stash che non è più necessario.

Il procedimento quindi appare così:

git fetch
git stash
git merge '@{u}'
git stash pop

Come azione predefinita, i cambiamenti dallo stash entrano nell'area di staging. Se vuoi toglierli dall'area di staging, usa git restore --staged (se stai usando una versione di Git più recente di 2.25.0).

Vuoi solo scaricare i cambiamenti da remoto

L'ultimo scenario è un po' diverso dai precedenti. Diciamo che sei nel bel mezzo di un refactoring molto confusionario. Non sono delle opzioni né perdere i cambiamenti né stasharli. Mai, vuoi comunque avere i cambiamenti disponibili per eseguire git diff con le ultime novità come confronto.

Come hai probabilmente capito, ottenere i cambiamenti remoti non richiede assolutamente git pull! git fetch è sufficiente.

Una cosa da tenere a mente è che, come comportamento predefinito, git fetch prende i cambiamenti solo del branch corrente. Per ottenere i cambiamenti di tutti i branch usa git fetch --all. E se vuoi ripulire un po' i branch che non esistono più sul repository remoto, usa git fetch --all --prune per fare pulizie!

Qualche automazione

Hai mai sentito di Git Config? È un file dove Git immagazzina le impostazioni configurate dall'utente. Risiede nella tua cartella home: come ~/.gitconfig o come ~/.config/git/config. Puoi modificarlo per aggiungervi alias personalizzati che saranno compresi come comandi Git.

Per esempio, per avere una abbreviazione uguale a git diff --cached (che mostra la differenza tra il branch corrente e i file nello stage), potresti aggiungere la seguente sezione:

[alias]
  dc = diff --cached

Dopo di ciò, puoi eseguire git dc ogni volta che vuoi revisionare i cambiamenti. Andando avanti così possiamo creare alcuni alias relativi ai casi precedenti.

[alias]
  pull_force = !"git fetch --all; git reset --hard HEAD; git merge @{u}"
  pf = pull_force
  pull_stash = !"git fetch --all; git stash; git merge @{u}; git stash pop"

In questo modo, se esegui git pull_force sovrascriverai i cambiamenti locali mentre git pull_stash li conserverà.

Git Pull Force

Menti curiose avranno già scoperto che esiste una cosa come git pull --force. Questa però è una bestia diversa da ciò che è stato presentato in questo articolo.

Può sembrare qualcosa che ci potrebbe aiutare a sovrascrivere i cambiamenti locali, invece ci permette di fare il fetch di cambiamenti da un branch remoto a un branch locale diverso. git pull --force cambia solo il comportamento del fetching. È equivalente a git fetch --force.

Come git push, git fetch permette di specificare su quali branch locale e remoto vogliamo lavorare. git fetch origin/feature-1:my-feature significa che il branch feature-1 del repository remoto sarà visibile sul branch locale my-feature. Quando tale operazione modifica la storia esistente, non è permessa da Git senza l'uso esplicito del parametro --force.

Allo stesso modo in cui git push --force permette di sovrascrivere branch remoti, git fetch --force (o git pull --force) permette di sovrascrivere branch locali. È sempre usato con i branch sorgente e destinazione menzionati come parametri. Un approccio alternativo per sovrascrivere i cambiamenti locali con git pull --force potrebbe essere git pull --force "@{u}:HEAD".

In conclusione

Il mondo di Git è vasto e questo articolo copre sono una delle sfaccettature legate alle manutenzione di un repository: incorporare cambiamenti remoti in un repository locale. Anche questa situazione quotidiana, ci ha richiesto un'analisi dettagliata del meccanismo interno di questo strumento di controllo versione.

Imparare quali sono le situazioni di utilizzo pratico aiuta a capire meglio come funziona Git. Questo, di conseguenza, ti permetterà di sentirti competente ogni volta che ti trovi nei guai. Capita a tutti.

Se hai mai visto l'estensione .xml nella tua cartella dei download e ti sei chiesto che cosa fosse, non sei solo.

Continua a leggere per imparare cos'è un file XML e come aprirlo, sia localmente sul tuo computer che in un editor online.

Cos'è un file XML?

XML è l'acronimo per Extensible Markup Language ed è stato creato negli anni '90 dal World Wide Web Consortium (W3C).

Anche se l'XML, come l'HTML, è un linguaggio di markup leggibile dagli umani, hanno una funzione diversa. L'HTML descrive la struttura di una pagina web e del suo contenuto, l'XML descrive la struttura di dati.

L'XML fornisce ai programmi e soprattutto ai programmatori, un formato standard largamente accettato per la trasmissione dei dati tra diversi sistemi. In questo modo, XML ha più in comune con JSON che con l'HTML.

Mentre l'XML non è più il metodo preferito per organizzare e trasmettere dati, ha ancora il suo posto. L'XML è ancora usato in molti vecchi sistemi, e sia RSS e SVG sono basati sul formato XML.

Ecco un semplice esempio di un file XML e di come è usato per strutturare dati:

<?xml version="1.0" encoding="UTF-8"?>
<fcc_merch>
   <item>
      <name>Triblend T-shirt</name>
      <price>$24.99</price>
      <description>Represent the freeCodeCamp community with pride in this jet-black Triblend T-shirt featuring the iconic "bonfire function call" logo.</description>
   </item>
   <item>
      <name>Cotton-Poly Pullover Hoodie</name>
      <price>$49.99</price>
      <description>Stay toasty and dress like a developer with this jet-black cotton-poly pullover hoodie.</description>
   </item>
   <item>
      <name>Ceramic Coffee Mug</name>
      <price>$14.99</price>
      <description>Toast to the developer community with your very own freeCodeCamp Bonfire Function Call mug.</description>
   </item>
</fcc_merch>

Come aprire un file XML in locale

Torniamo alla tua cartella dei download e a quel file con l'estensione .xml.

Se hai mai bisogno di aprire un file XML, hai molte opzioni. La grande domanda è se hai bisogno di modificare i dati nel file XML, o solo visualizzarlo.

Visualizzare un file XML nel browser

Se tutto quello di cui hai bisogno è vedere i dati di un file XML, sei fortunato. Più o meno qualsiasi browser può aprire un file XML.

Su Chrome, puoi semplicemente aprire una nuova scheda e trascinare lì il file XML. In alternativa, puoi fare click con il tasto destro sul file XML, spostare la freccetta su "Apri con" e poi cliccare su "Chrome".

Quando lo fai, il file si aprirà in una nuova scheda.

Ecco come il file fcc-merch.xml appare su Chrome:

Nota: le istruzioni per il tuo sistema operativo potrebbero differire leggermente.

Modificare un file XML in un editor di testo

Se hai bisogno di modificare un file XML in locale, o se preferisci vederlo al di fuori del browser, il modo migliore per farlo è con un editor di testo.

Ci sono un sacco di opzioni a seconda del tuo sistema operativo. Ecco alcune raccomandazioni comuni:

Windows:

• Notepad++

Mac/Linux/Windows:

• VSCode
• Atom
• Sublime Text

Tieni a mente che VSCode, Atom e Sublime Text sono programmi piuttosto pesanti, specialmente se tutto quello che vuoi fare è modificare un file XML. Utenti Mac e Linux potrebbero avere accesso ad altri editor di testo leggeri come gedit o Leafpad che possono aprire e modificare file XML.

Se vuoi imparare a programmare, allora prova pure uno degli editor elencati sopra.

Una volta che hai scaricato l'editor, puoi aprire il file XML dall'interfaccia grafica dell'editor come faresti per qualsiasi altro file.

Ecco lo stesso file fcc-merch.xml in VSCode:

Come aprire un file XML online

Aprire un file XML online è facile, e i migliori visualizzatori di XML svolgono anche le funzioni di editor e formattazione.

Ecco alcuni dei più popolari editor/visualizzatori XML online:

• Code Beautify
• JSON Formatter
• Tutorialspoint

Lavorano in maniera simile, permettendoti di caricare il file XML dal computer o copiarlo e incollarlo nell'editor a sinistra:

Una volta che carichi il tuo XML, puoi cliccare su "Tree View" per far sì che sia più facile vedere la gerarchia dei tuoi dati e come sono annidati i diversi campi:

Fai qualsiasi modifica di cui hai bisogno nell'editor a sinistra. Poi quando hai finito, clicca "Download" per scaricare una copia del tuo file modificato.

Tieni a mente che il tuo file scaricato potrebbe avere un nome diverso come codebeautify.xml. Devi semplicemente rinominarlo prima di allegarlo a una mail, caricarlo o qualsiasi altra operazione devi svolgere.

In sintesi

Il formato XML ha una storia lunga e leggendaria.

Anche se i file XML sono piuttosto densi rispetto alle soluzioni moderne per la trasmissione dei dati come JSON, non fa male conoscere come aprirli e modificarli. Fortunatamente hai molte opzioni in locale e online.

Spero che questo ti aiuti la prossima volta che hai bisogno di aprire o modificare un file XML.

Buona programmazione.

Il file .gitignore è un file di testo che dice a Git quali file e cartelle ignorare in un progetto.

Un file .gitignore locale viene tipicamente aggiunto nella cartella root di un progetto. Puoi anche creare un file .gitignore globale, e quello che ci scrivi viene ignorato in tutti i tuoi repo Git.

Per creare un file .gitignore locale, crea un file di testo e dagli il nome .gitignore (ricorda di includere il punto . all'inizio). Poi modifica questo file al bisogno. Ogni nuova riga dovrebbe elencare un altro file o un'altra cartella che vuoi che Git ignori.

Le voci in questo file possono anche seguire un pattern:

• * è un jolly
• / è usato per ignorare percorsi relativi al file .gitignore
• # è usato per aggiungere commenti al file .gitignore

Questo è un esempio di come potrebbe essere un file .gitignore:

# Ignora i file di sistema Mac
.DS_store

# Ignora la cartella node_modules
node_modules

# Ignora tutti i file .txt
*.txt

# Ignora i file collegati alle chiavi API
.env

# Ignora i file SASS di configurazione
.sass-cache

Per aggiungere o cambiare il tuo file .gitignore globale, esegui il seguente comando:

git config --global core.excludesfile ~/.gitignore_global

Questo comando crea il file ~/.gitignore_global. Ora puoi modificare quel file allo stesso modo di un file .gitignore. Tutti i tuoi repo git ignoreranno i file e le cartelle scritte nel file globale .gitignore.

Come smettere di tenere traccia dei file precedentemente inclusi in un commit da un nuovo gitignore

Per smettere di tenere traccia di un singolo file, cioè smettere di tenerne traccia ma non cancellarlo dal sistema usa:

git rm --cached filename

Per smettere di tenere traccia di tutti i file in .gitignore:

Prima fai il commit di qualsiasi cambiamento che hai in sospeso, poi esegui:

git rm -r --cached

Questo rimuove qualsiasi file dall'indice (area di staging). Poi esegui:

git add .

Fai il commit:

git commit -m ".gitignore ora funziona"

Per annullare git rm --cached filename, usa git add filename

Se hai preso un aereo nell'ultima decade, e hai uno smartphone, hai probabilmente dovuto impostare la modalità aereo prima che l'aereo decollasse.

Mentre molti di noi semplicemente seguono le regole, hai mai pensato a perché hai bisogno di usare la modalità aereo?

In questo articolo impareremo cosa fa la modalità aereo, perché devi usarla durante i voli e in che altro modo ti può aiutare nella tua vita di tutti i giorni.

Cosa è la modalità aereo?

Quando attivi la modalità aereo, disattivi la capacità del tuo telefono di connettersi alle reti cellulari o WiFi o al Bluetooth. Questo significa che non puoi fare o ricevere chiamate, mandare messaggi o navigare in internet.

Puoi comunque usare il tuo telefono: puoi fare foto, ascoltare la musica, giocare ai videogiochi, scrivere email o messaggi da mandare più tardi. In pratica tutto quello che non richiede campo o internet.

Come lo attivi?

Per attivare la modalità aereo se hai un iPhone o iPad devi semplicemente scorrere velocemente dal bordo inferiore dello schermo verso l'alto. Vedrai una piccola icona a forma di aereo nel menu che compare, toccalo e cambierà colore. Questo significa che la modalità aereo è attiva.

Noterai che il tuo wifi è stato spento e che il tuo telefono non sta più trasmettendo un segnale radio.

Se hai un telefono Android, il procedimento è simile, scorri velocemente dall'alto dello schermo verso il basso e attiva la modalità aereo.

Perché dobbiamo farlo?

Il tuo telefono è uno strumento piccolo ma potente. Emette onde radio e interferenze elettromagnetiche che possono interferire con i dispositivi per le comunicazioni dell'aereo. E nessuno vuole un aereo che non riesce a comunicare con, diciamo, la torre di controllo dell'aeroporto di destinazione.

L'Amministrazione Federale dell'Aviazione (FAA) ha anche determinato che i segnali cellulari che vengono da un aereo potrebbero sopraffare le torri cellulari a terra, causando una interruzione del servizio. Dopo tutto milioni di persone voltano ogni giorno, il che vorrebbe dire un sacco di torri intasate.

Qualsiasi sia la ragione, e indipendentemente da cosa ne pensi, è una buona idea seguire le istruzioni dell'assistente di volo e attivare la modalità aereo quando sei in volo.

Il lato positivo

Sei anni fa, FAA ha deciso che le restrizioni sui dispositivi mobili erano un po' troppo restrittive, quindi hanno iniziato a permettere ai passeggeri di usare WiFi e Bluetooth durante i voli.

Se il tuo aereo ha una rete Wifi a bordo, sentiti libero di connetterti e navigare su internet. Bonus: puoi usare le tue cuffie bluetooth. Devi riattivare manualmente il WiFi una volta attivata la modalità aereo (nello stesso menu che hai visto sopra).

Ci sono altri usi per la modalità aeroplano?

Pensa a cosa fa la modalità aereo: fa sì che tu non possa ricevere o fare telefonare o ricevere e inviare messaggi. Ti impedisce anche di navigare in internet senza scopo. Ah, il potenziale per la pace mentale e la produttività.

Concentrarsi sul lavoro

Se hai bisogno di concentrarti e fare del lavoro focalizzato, considera di attivare la modalità aereo. Niente più distrazioni da pop-up, notifiche o rumori dal tuo dispositivo - che sollievo.

Puoi impostare un limite di tempo per te stesso (nessun bisogno di avere la modalità aereo attivata tutto il giorno. Il tuo compagno potrebbe avere bisogno di chiederti cosa vuoi per cena o i tuoi figli potrebbero doverti contattare). Prova un paio d'ore e vedi quanto riesci a completare.

Proteggi i tuoi figli

Parlando di figli, la modalità aereo può essere utile anche per loro. Se dai il tuo telefono o tablet (per un limitato tempo allo schermo, giusto?) non vuoi che chiamino accidentalmente il tuo capo o comprino la tua intera wishlist di Amazon.

Quindi, attiva la modalità aereo. Saranno sempre in grado di fare giochi, scattare foto, e così via. Non saranno in grado di infilarsi in così tanti pasticci.

Carica più in fretta (e risparmia la batteria)

Quando il tuo telefono è in modalità aereo, non sta continuamente provando a connettersi a una rete senza fili o a trovare campo. Quindi la tua batteria durerà molto di più.

Se hai una lunga giornata, e hai dimenticato il caricatore portatile, attiva la modalità aereo. Riuscirai a completare più attività, avere un po' di pace mentale, e il tuo telefono sarà ancora un po' carico, così puoi avere le indicazioni per raggiungere quel nuovo ristorante (o qualsiasi altra cosa) che volevi provare.

Bonus: quando la modalità aereo è attiva, il tuo telefono caricherà più in fretta (per la stessa ragione menzionata sopra, non sta provando a fare così tante cose allo stesso tempo, così si può concentrare sulla carica). Quindi se non hai un nuovo dispositivo che carica super-velocemente questo potrebbe aiutarti.

Disconnettiti e prendi una pausa

Infine, qualche volta vuoi semplicemente staccarti dal tuo telefono o tablet e liberarti da tutte le notifiche. Buon per te - fallo.

La modalità aereo rende facile disconnetterti dal tuo dispositivo ma averlo comunque accesso (per usarlo come sveglia, per esempio. O scattare foto in vacanza). Quindi tocca quell'icona a forma di aeroplano e lascia da parte le tue preoccupazioni per un po'.

Ho sentito molti sviluppatori dire che odiano il CSS. Nella mia esperienza, questo capita come diretta conseguenza del non prendersi abbastanza tempo per impararlo.

Il CSS non è il "linguaggio" più carino, ma ha dato vita allo stile del web per più di vent'anni. Non sta andando poi così male, no?

Però, più scrivi CSS e più ti accorgi di un grosso difetto.

È dannatamente difficile da manutenere.

Il CSS scritto male diventa velocemente un incubo.

Ecco alcune convenzioni di nomenclatura che ti risparmieranno un po' di stress e innumerevoli ore di lavoro.

Usa stringhe delimitate da trattini

Se scrivi un sacco di JavaScript, scrivere le variabili in camel case è una pratica comune.

var redBox = document.getElementById('...')

Il problema è che questo tipo di nomenclatura non è adatta al CSS.

Non fare questo:

.redBox {
    border: 1px solid red;
}

Invece, scrivi:

.red-box {
    border: 1px solid red;
}

Questa è una nomenclatura piuttosto standard in CSS ed è senza dubbio più leggibile.

È anche coerente con i nomi delle proprietà in CSS.

/* Corretto */
.some-class {
    font-weight: 10em;
}

/* Sbagliato */
.some-class {
    fontWeight: 10em;
}

La nomenclatura BEM

Diversi team hanno diversi approcci per la denominazione dei selettori CSS. Alcuni team usano i trattini, mentre altri preferiscono usare una nomenclatura più strutturata chiamata BEM.

In genere, ci sono tre problemi che le convenzioni di nomenclatura CSS provano a risolvere:

1. Sapere cosa fa un selettore
2. Avere un'idea di dove può essere usato un selettore
3. Sapere la relazione tra i nomi delle classi

Tutto ciò dovrebbe essere chiaro dando una semplice occhiata al nome del selettore.

Hai mai visto nomi di classi scritti così?

.nav--secondary { }

.nav__header { }

Questa è la nomenclatura BEM.

Spiegare la nomenclatura BEM a un bambino di cinque anni

La nomenclatura BEM prova a dividere l'interfaccia utente in piccoli componenti riutilizzabili.

Considera l'immagine seguente:

No, non è degno di riconoscimenti :(

L'omino rappresenta un componente, come un blocco di design.

Potresti avere già indovinato che la B in BEM sta per 'Blocco'.

Nel mondo reale, questo 'blocco' potrebbe rappresentare una barra di navigazione, un'intestazione, un pie' di pagina e altri blocchi di design.

Seguendo la pratica spiegata sopra, un nome ideale per la classe per questo componente sarebbe stick-man.

Lo stile del componente dovrebbe essere impostato in questo modo:

.stick-man {   }

Abbiamo usato le stringhe delimitate da trattini. Ottimo!

E per elementi

La E in 'BEM' sta per Elementi.

I blocchi di design generali raramente sono isolati.

Per esempio, l'omino a bastoncini ha una testa head, due bellissime braccia arms, e dei piedi feet.

head, feet e arms sono tutti elementi dentro il componente. Posso essere visti come componenti figli, cioè figli del componente genitore generale.

Usando la nomenclatura BEM, i nomi delle classi degli elementi sono derivati aggiungendo due trattini bassi, seguiti dal nome dell'elemento.

Per esempio:

.stick-man__head {   }

.stick-man__arms {   }

.stick-man__feet {   }

M per modificatori

La lettera M in 'BEM' sta per Modificatori.

E se l'omino a bastoncini fosse modificato e potessimo avere un omino blu (blue) o un omino rosso (red)?

Nel mondo reale, questo potrebbe essere un pulsante blu o un pulsante rosso. Queste sono modifiche del componente in questione.

Usando la nomenclatura BEM, i nomi delle classi modificate sono derivati aggiungendo due trattini seguiti dal nome dell'elemento.

Per esempio:

.stick-man--blue {   }

.stick-man--red {   }

L'ultimo esempio mostra il componente genitore che viene modificato. Ma non è sempre così.

Potremmo avere degli omini con diverse dimensioni della testa.

Questa volta è l'elemento che è stato modificato. Ricorda, l'elemento è un componente figlio dentro un blocco contenitore generale.

Quindi, .stick-man rappresenta il blocco, .stick-man__head l'elemento.

Come hai visto nell'esempio sopra, i due trattini possono essere usati in questo modo:

.stick-man__head--small {   }

.stick-man__head--big {   }

Nota l'uso dei due trattini nell'esempio qui sopra. Sono usati per denotare un modificatore.

Abbiamo visto come funziona la nomenclatura BEM.

Personalmente, tendo a usare i nomi di classi con i trattini per progetti semplici, e la nomenclatura BEM per interfacce utente più complesse.

Qui puoi leggere di più sulla nomenclatura BEM.

Perché usare nomenclature specifiche?

Ci sono solo due problemi difficili in informatica: invalidare la cache e dare i nomi alle cose – Phil Karlton

Dare il nome alle cose è difficile. Stiamo provando a rendere le cose più semplici e risparmiare del tempo in futuro con del codice su cui è più facile fare manutenzione.

Dare il nome corretto alle cose in CSS renderà il tuo codice più facile da leggere e da gestire.

Se scegli di usare la nomenclatura BEM, diventerà più semplice capire la relazione tra i componenti/blocchi del design solo guardando il markup.

Nomi CSS con gli Hook JavaScript

Oggi è il primo giorno di lavoro di John.

Gli viene dato del codice HTML come questo:

<div class="siteNavigation">
</div>

John ha letto questo articolo e ha realizzato che questo potrebbe non essere il modo migliore per dare il nome alle cose in CSS. Quindi fa il refactoring in questo modo:

<div class="site-navigation">
</div>

Meglio, mh?

Senza saperlo, John ha rotto il codebase...

Come?

Da qualche parte nel codice JavaScript, c'era una relazione con la classe precedente, siteNavigation:

// the JavaScript code
const nav = document.querySelector('.siteNavigation')

Quindi, con questo cambiamento al nome della classe, la variabile nav diventa null.

Che cosa triste.

Per evitare casi come questo, gli sviluppatori hanno studiato diverse strategie.

1. Usare classi che iniziano con js-

Un modo per ridurre questi bug è usare nomi di classi che iniziano con js-* per denotare una relazione con l'elemento del DOM in questione.

Ad esempio:

<div class="site-navigation js-site-navigation">
</div>

E nel codice JavaScript

// the JavaScript code
const nav = document.querySelector(".js-site-navigation")

Come convenzione, chiunque vede il nome di classe js-site-navigation capisce che c'è una relazione con l'elemento del DOM nel codice JavaScript.

2. Usare l'attributo Rel

Non uso questa tecnica personalmente, ma ho visto persone che lo fanno.

Lo riconosci?

<link rel="stylesheet" type="text/css" href="main.css">

In pratica, l'attributo rel definisce la relazione che una risorsa linkata ha con il documento che vi fa riferimento.

Nell'esempio precedente con John, i sostenitori di questa tecnica farebbero così:

<div class='site-navigation' rel='js-site-navigation'>
</div>

E nel JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Ho i miei dubbi su questa tecnica, ma ti potrebbe capitare di vederla in alcuni codebase. La dichiarazione qui è, "c'è una relazione con il JavaScript, quindi uso l'attributo rel per denotarlo".

Il web è un grande posto con tanti diversi "metodi" per risolvere gli stessi problemi.

3. Non usare attributi data

Alcuni sviluppatori usano gli attributi data come hook JavaScript. Questo non è corretto. Per definizione, gli attributi data sono usati per immagazzinare dati personalizzati.

Modifica #1: come menzionato da certe fantastiche persone nella sezione commenti, se le persone usano l'attributo 'rel', allora forse è ok usare gli attributi data in certi casi. Sta a te decidere  dopo tutto.

Consiglio extra: scrivi più commenti CSS

Questo non ha nulla a che vedere con le convezioni di nomenclatura, ma ti salverà un sacco di tempo.

Mentre un sacco di sviluppatori web consigliano di non scrivere commenti JavaScript, o scriverne pochi, credo che dovresti scrivere più commenti CSS.

Visto che il CSS non è il linguaggio più elegante, commenti ben strutturati possono salvare tempo quando stai provando a capire il tuo codice.

Di certo male non fa.

Guarda quanto è ben commentato il codice sorgente di Bootstrap!

Non devi scrivere commenti per dire che color: red rende qualcosa rosso. Ma se stai usando trucchetti CSS meno ovvi, sentiti libero di scrivere un commento.

I comandi di Git pull e fetch sono usati regolarmente dagli utenti di Git. Vediamo qual è la differenza tra questi due comandi.

Per contestualizzare, è bene ricordare che stiamo probabilmente lavorando in un repo clone. Cosa è un clone? È semplicemente un duplicato di un altro repo: praticamente è la tua copia del codice sorgente di qualcun altro.

Detto questo, per tenere il tuo clone aggiornato, avrai bisogno di portare al tuo clone i cambiamenti che possono essere stati fatti all'originale.

È qui che fetch e pull entrano in gioco.

git fetch è il comando che dice al tuo git locale di ottenere i meta-dati più recenti dall'originale (ma non fa nessun trasferimento di file. È più che altro per vedere se ci sono cambiamenti disponibili).

git pull, d'altra parte, fa quello e copia i cambiamenti dal repository remoto.

Per esempio:

git pull origin ankur bugfix

Il punto principale da tenere a mente è che, in genere, ci sono almeno tre copie di un progetto nel tuo spazio di lavoro.

• Una copia è il tuo repository con la tua storia dei commit (quella già salvata, per così dire)
• La seconda copia è la tua copia di lavoro dove stai modificando e costruendo (non ancora in un commit sul tuo repository)
• La terza copia è la copia cache del repository remoto (forse l'originale da cui hai clonato il tuo).

Puoi usare git fetch per conoscere i cambiamenti fatti nel branch/repo remoto dal tuo ultimo pull. Questo è utile per permettere di controllare prima di fare un pull, che potrebbe cambiare i file nel tuo branch corrente e nella copia di lavoro (e potenzialmente perdere i tuoi cambiamenti, ecc).

git fetch    
git diff ...origin

Gli oggetti stringa sono rappresentati come stringhe di caratteri.

Se hai lavorato in Java Swing, sai che ha componenti come JTextField e JTextArea che usiamo per ottenere i nostri input dall'interfaccia grafica. Inoltre, prende il nostro input come una stringa.

Se vogliamo fare una semplice calcolatrice usando Swing, dobbiamo scoprire come convertire una stringa in un numero intero. Questo ci porta alla domanda, come facciamo a convertire una stringa in un numero intero?

In Java, possiamo usare Integer.valueOf() e Integer.parseInt() per convertire una stringa in un numero intero.

1. Usare Integer.parseInt() per convertire una stringa in un numero intero

Questo metodo restituisce la stringa come un tipo primitivo int. Se la stringa non contiene un numero intero valido allora dà una eccezione NumberFormatException.

Quindi, ogni volta che convertiamo una stringa in un numero intero, dobbiamo gestire questa eccezione mettendo il codice dentro un blocco try-catch.

Consideriamo un esempio di conversione da una stringa ad un numero intero usando Integer.parseInt():

        String str = "25";
        try{
            int number = Integer.parseInt(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Cerchiamo di rompere questo codice scrivendo un numero intero non valido:

     	String str = "25T";
        try{
            int number = Integer.parseInt(str);
            System.out.println(number);
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Come puoi vedere nel codice sopra, abbiamo provato a convertire 25T in un numero intero. Questo non è un input valido, quindi dà un errore NumberFormatException.

Ecco l'output del codice sopra:

java.lang.NumberFormatException: For input string: "25T"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.parseInt(Integer.java:615)
	at OOP.StringTest.main(StringTest.java:51)

Come passo successivo, consideriamo come convertire una stringa in un numero intero, usando il metodo Integer.valueOf() method.

2. Usare Integer.valueOf() per convertire una stringa in un numero intero

Questo metodo restituisce la stringa come oggetto numero intero. Se guardi sulla documentazione di Java, Integer.valueOf() restituisce un oggetto numero intero che è equivalente a new Integer(Integer.parseInt(s)).

Metteremo il nostro codice in un blocco try-catch quando usiamo questo metodo. Consideriamo un esempio usando il metodo Integer.valueOf():

        String str = "25";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Ora, proviamo a romperlo inserendo un numero intero non valido:

        String str = "25TA";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); 
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Come l'esempio precedente, il codice sopra darà un errore.

Ecco l'output del codice sopra:

java.lang.NumberFormatException: For input string: "25TA"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.valueOf(Integer.java:766)
	at OOP.StringTest.main(StringTest.java:42)

Prima di usare il metodo sopra menzionato, possiamo anche creare un metodo per controllare se la stringa input è numerica o meno.

Ho creato un semplice metodo per controllare se la stringa inserita è numerica o no:

public class StringTest {
    public static void main(String[] args) {
        String str = "25";
        String str1 = "25.06";
        System.out.println(isNumeric(str));
        System.out.println(isNumeric(str1));
    }

    private static boolean isNumeric(String str){
        return str != null && str.matches("[0-9.]+");
    }
}

L'output è:

true
true

Il metodo isNumeric() prende una stringa come argomento. Prima controlla se è null o meno. Poi usa il metodo matches() per vedere se contiene le cifre da 0 a 9 e il carattere punto.

Questo è un semplice modo per controllare se è un valore numerico. Puoi scrivere tu stesso o cercare su Google espressioni regolari più complesse a seconda del tuo caso di utilizzo.

È buona pratica controllare se la stringa input è numerica o no prima di provare a trasformarla in un numero intero.

Grazie per aver letto quest'articolo.

Immagine di 🇸🇮 Janko Ferlič su Unsplash

Buona programmazione!

In JavaScript, i tre puntini (...) vengono usati sia per l'operatore rest che per l'operatore spread, ma questi due operatori non sono affatto la stessa cosa.

La differrenza principale è che l'operatore rest mette il resto di alcuni valori dati dall'utente in un array JavaScript, mentre l'operatore spread espande gli iterabili in elementi individuali.

Per esempio, considera questo codice che fa uso dell'operatore rest per includere dei valori in un array:

// Usa l'operatore rest per includere il resto di certi valori dati dall'utente in un array:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

// Invoca la funzione myBio passando cinque argomenti ai suoi parametri:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// L'invocazione qui sopra restituirà:
["CodeSweetly", "Web Developer", "Male"]

Provalo on StackBlitz

Nel blocco di codice qui sopra, abbiamo usato il parametro rest ...otherInfo per mettere "CodeSweetly", "Web Developer" e "Male" in un array.

Ora, considera l'esempio con l'operatore spread:

// Definisci una funzione con tre parametri:
function myBio(firstName, lastName, company) { 
  return `${firstName} ${lastName} runs ${company}`;
}

// Usa spread per espandere gli elementi dell'array in argomenti individuali:
myBio(...["Oluwatobi", "Sofela", "CodeSweetly"]);

// L'invocazione qui sopra restituirà:
“Oluwatobi Sofela runs CodeSweetly”

Provalo su StackBlitz

In questo blocco di codice, abbiamo usato l'operatore spread (...) per espandere il contenuto dell'array ["Oluwatobi", "Sofela", "CodeSweetly"] sui parametri di myBio().

Non preoccuparti se non capisci ancora gli operatori rest e spread. Questo articolo è qui per te!

Nelle prossime sezioni discuteremo come funzionano in JavaScript i parametri rest e spread.

Quindi, senza cincischiare, iniziamo con l'operatore rest.

Cosa è esattamente l'operatore rest?

L'operatore rest è usato per mettere il resto di determinati valori inseriti dall'utente in un array JavaScript.

Ecco la sintassi dell'operatore rest:

...yourValues

I tre puntini (...) in questa riga di codice simbolizzano l'operatore rest.

Il testo dopo l'operatore si riferisce ai valori che vuoi mettere nell'array. Puoi usarlo solo prima dell'ultimo parametro nella definizione di una funzione.

Per capire la sintassi, vediamo come funziona l'operatore rest con le funzioni JavaScript.

Come agisce l'operatore rest in una funzione?

Nelle funzioni JavaScript, l'operatore rest viene usato come prefisso dell'ultimo parametro della funzione.

Ecco un esempio:

// Definisci una funzione con due parametri regolari e un parametro rest:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

L'operatore rest (...) dà istruzione al computer di aggiungere qualsiasi argomento otherInfo dato dall'utente dentro un array e assegna l'array al parametro otherInfo.

Quindi definiamo...otherInfo un parametro rest.

Note: gli argomenti sono valori opzionali che puoi passare ai parametri tramite un'invocazione.

Ecco un altro esempio:

// Definisci una funzione con due parametri regolari e un parametro rest:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

// Invoca la funzione myBio passando cinque argomenti ai suoi parametri:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// L'invocazione qui sopra restituirà:
["CodeSweetly", "Web Developer", "Male"]

Provalo su StackBlitz

Nello snippet che hai appena visto, nota che l'invocazione passa cinque argomenti alla funzione.

In altre parole, "Oluwatobi" e "Sofela" vengono assegnati ai parametri firstName e lastName.

Allo stesso tempo, l'operatore rest aggiunge gli argomenti rimanenti ("CodeSweetly", "Web Developer", e "Male") in un array assegnato al parametro otherInfo.

Quindi, la funzione myBio() restituisce correttamente ["CoreSweetly", "Web Developer", "Male"] come contenuto del parametro rest otherInfo.

Attenzione! Non puoi usare "use strict" in una funzione che contiene un parametro rest

Tieni a mente che non puoi usare la direttiva "use strict" dentro una funzione che contiene un parametro rest, parametri di default o parametri destrutturati, altrimenti, il computer darà un errore di sintassi.

Considera questo esempio:

// Definisci una funzione con un parametro rest:
function printMyName(...value) {
  "use strict";
  return value;
}

// La definizione qui sopra restituirà:
"Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list"

Provalo su CodeSandbox

La funzione printMyName() restituisce un errore di sintassi perché abbiamo usato la direttiva "use strict" dentro una funzione con un parametro rest.

Ma supponi di aver bisogno che la tua funzione sia in strict mode e allo stesso tempo usi il parametro rest. In un caso come questo, puoi scrivere la direttiva "use strict" al di fuori della funzione.

Ecco un esempio:

// Definisci la direttiva "use strict" al di fuori della funzione:
"use strict";

// Definisci una funzione con un parametro rest:
function printMyName(...value) {
  return value;
}

// Invoca la funzione printMyName passando due argomenti alla funzione:
printMyName("Oluwatobi", "Sofela");

// L'invocazione qui sopra restituirà:
["Oluwatobi", "Sofela"]

Provalo su CodeSandbox

Nota: metti la direttiva "use strict" al di fuori della funzione solo se va bene che tutto lo script o l'ambito esterno sia in strict mode.

Quindi adesso che sappiamo come agisce l'operatore rest in una funzione, possiamo parlare di come funziona in una assegnazione con destrutturazione.

Come funziona l'operatore rest in una assegnazione con destrutturazione

L'operatore rest viene usato tipicamente come prefisso dell'ultima variabile dell'assegnazione con destrutturazione.

Ecco un esempio:

// Definisci un array di destrutturazione con due variabili normali e una variabile rest:
const [firstName, lastName, ...otherInfo] = [
  "Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male"
];

// Invoca la variabile otherInfo:
console.log(otherInfo); 

// L'invocazione qui sopra restituisce:
["CodeSweetly", "Web Developer", "Male"]

Provalo su StackBlitz

L'operatore rest (...) dà istruzione al computer di aggiungere i valori rimanenti tra quelli assegnati dall'utente dentro un array. Poi, assegna l'array alla variabile otherInfo.

Quindi, possiamo chiamare ...otherInfo una variabile rest.

Ecco un altro esempio:

// Definisci un oggetto di destrutturazione con due variabili regolari e una variabile rest:
const { firstName, lastName, ...otherInfo } = {
  firstName: "Oluwatobi",
  lastName: "Sofela", 
  companyName: "CodeSweetly",
  profession: "Web Developer",
  gender: "Male"
}

// Invoca la variabile otherInfo:
console.log(otherInfo);

// L'invocazione qui sopra restituisce:
{companyName: "CodeSweetly", profession: "Web Developer", gender: "Male"}

Provalo su StackBlitz

Nel blocco di codice che hai appena visto, puoi notare che l'operatore rest assegna le proprietà di un oggetto, non un array, alla variabile otherInfo.

In altre parole, ogni volta che usi un oggetto di destrutturazione, l'operatore rest produce un oggetto con proprietà.

Invece, se usi rest in un array di destrutturazione o in una funzione, l'operatore restituisce un array letterale.

Prima di concludere la nostra discussione sull'operatore rest, dovresti essere a conoscenza di alcune differenze tra l'oggetto arguments e il parametro rest.

Qual è la differenza tra argomenti e parametri rest?

Ecco alcune delle differenze tra gli argomenti e il parametro rest:

Differenza 1: arguments è un oggetto simil-array, non un vero array

Tieni a mente che in JavaScript l'oggetto arguments non è un vero array. Invece è un oggetto simil-array che non ha tutte le funzionalità di un normale array JavaScript.

Il parametro rest, invece, è un vero oggetto array e puoi usare tutti i metodi degli array su di esso.

Quindi, puoi usare i metodi sort(), map(), forEach() o pop() su un parametro rest, ma non puoi fare lo stesso su un oggetto arguments.

Differenza 2: Non puoi usare l'oggetto arguments in una funzione freccia

L'oggetto arguments non è disponibile in una funzione freccia, quindi non puoi usarlo al suo interno, ma puoi usare il parametro rest in tutte le funzioni, incluse le funzioni freccia.

È meglio usare il parametro rest invece dell'oggetto arguments - specialmente quando scrivi codice compatibile con ES6.

Ora che sappiamo come funziona rest, parliamo dell'operatore spread così da vedere le differenze.

Cosa è l'operatore spread e come funziona in JavaScript?

L'operatore spread (...)  aiuta a espandere gli iterabili in elementi singoli.

La sintassi spread funziona dentro array letterali, invocazioni di funzioni e oggetti di proprietà inizializzati per spalmare i valori di oggetti iterabili in elementi separati. In pratica, fa l'opposto dell'operatore spread.

Nota: un operatore spread è efficace solo se usato dentro array letterali, invocazioni di funzioni o oggetti di proprietà inizializzati.

Cosa significa esattamente? Vediamolo con degli esempi.

Esempio 1: Come funziona spread in un array letterale

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// L'invocazione qui sopra restituisce:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]

Provalo su StackBlitz

Lo snippet di codice qui sopra usa l'operatore spread per copiare l'array myName dentro aboutMe.

Nota:

• Alterazioni di myName non si rifletteranno su aboutMe perché i valori dentro myName sono primitivi. Quindi, l'operatore spread semplicemente copia e incolla il contenuto di myName dentro aboutMe senza creare nessun riferimento all'array originale.
• L'operatore spread fa solo copie superficiali. Quindi tieni a mente che se supponiamo che myName contenga valori non primitivi, il computer creerebbe un riferimento tra myName e aboutMe. Vedi info 3 per più informazioni su come funziona l'operatore spread con i valori primitivi e non primitivi.
• Supponi che non abbiamo usato la sintassi spread per duplicare il contenuto di myName. Per esempio, se avessimo scritto const aboutMe = ["Oluwatobi", myName, "name."]. In un caso come questo, il computer assegnerebbe un riferimento a myName. Quindi, qualsiasi cambiamento fatto all'array originale si riflette nel duplicato.

Esempio 2: Come usare spread per convertire una stringa in elementi individuali di un array

const myName = "Oluwatobi Sofela";

console.log([...myName]);

// L'invocazione qui sopra restituisce:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

Provalo su StackBlitz

Nello snippet qui sopra, abbiamo usato la sintassi spread dentro un array letterale per espandere la stringa myName in elementi individuali.

Quindi, "Oluwatobi Sofela" è stato espanso in [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].

Esempio 3: come funziona l'operatore spread in una invocazione di funzione

const numbers = [1, 3, 5, 7];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// L'invocazione restituisce:
16

Provalo su StackBlitz

Abbiamo usato la sintassi spread per espandere l'array numbers sui parametri di addNumbers().

Supponi che l'array numbers abbia più di quattro elementi. In un caso come questo, il computer usa solo i primi quattro elementi come argomento di addNumbers() e ignora il resto.

Ecco un esempio:

const numbers = [1, 3, 5, 7, 10, 200, 90, 59];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// L'invocazione restituisce:
16

Provalo su StackBlitz

Ecco un altro esempio:

const myName = "Oluwatobi Sofela";

function spellName(a, b, c) {
  return a + b + c;
}

console.log(spellName(...myName));      // restituisce: "Olu"

console.log(spellName(...myName[3]));   // restituisce: "wundefinedundefined"

console.log(spellName([...myName]));    // restituisce: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"

console.log(spellName({...myName}));    // restituisce: "[object Object]undefinedundefined"

Provalo su StackBlitz

Esempio 4: come funziona spread in un oggetto letterale

const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };

console.log(bio);

// L'invocazione restituisce:
{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }

Provalo su StackBlitz

In questo esempio, abbiamo usato spread dentro l'oggetto bio per espandere i valori di myNames in proprietà individuali.

Cose da sapere sull'operatore spread

Tieni a mente queste tre essenziali informazioni quando scegli di usare l'operatore spread.

Info 1: L'operatore spread non può espandere i valori letterali di un oggetto

Visto che un oggetto di proprietà non è un oggetto iterabile, non puoi usare l'operatore spread per espandere i suoi valori.

Però puoi usare l'operatore spread per clonare le proprietà da un oggetto a un altro.

Ecco un esempio:

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };

console.log(bio);

// L'invocazione restituisce
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Provalo su Stack

Il codice che hai appena letto fa uso dell'operatore spread per clonare il contenuto di myName dentro l'oggetto bio.

Nota:

• L'operatore spread può espandere solo i valori di oggetti iterabili.
• Un oggetto è iterabile sono se ha (o qualsiasi oggetto nella sua catena prototype ha) una proprietà con una chiave @@iterator.
• Array, TypedArray, String, Map, e Set sono tipi iterabili integrati perché hanno la proprietà @@iterator di default.
• Un oggetto di proprietà non è un tipo di dato iterabile perché non ha la proprietà @@iterator di default.
• Puoi rendere un oggetto di proprietà iterabile aggiungendogli la proprietà @@iterator.

Info 2: L'operatore spread non clona proprietà identiche

Supponi di avere usato l'operatore spread per clonare le proprietà dall'oggetto A all'oggetto B. E supponi che B contenga proprietà identiche a quelle nell'oggetto A. In tal caso, la versione di B ha precedenza su quella di A.

Ecco un esempio:

const myName = { firstName: "Tobi", lastName: "Sofela" };
const bio = { ...myName, firstName: "Oluwatobi", website: "codesweetly.com" };

console.log(bio);

// L'invocazione restituisce:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Provalo su StackBlitz

Osserva che l'operatore spread non ha copiato la proprietà firstName da myName dentro l'oggetto bio perché bio già contiene una proprietà firstName.

Info 3: attenzione a come funziona spread quando usato su oggetti che contengono valori non primitivi!

Supponi che hai usato l'operatore spread su un oggetto (o array) contenente solo valori primitivi. Il computer non creerà nessun riferimento tra l'oggetto originale e quello duplicato.

Per esempio, considera questo codice:

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// L'invocazione restituisce:
["Oluwatobi", "Sofela", "is", "my", "name."]

Provalo su StackBlitz

Osserva che ogni elemento in myName è un valore primitivo. Quindi, quando usiamo l'operatore spread per clonare myName in aboutMe, il computer non ha creato un riferimento tra questi due array.

Qualsiasi modifica fai a myName non si riflette su aboutMe e vice versa.

Come esempio, aggiungiamo un elemento in più a myName:

myName.push("real");

Ora, controlliamo lo stato corrente di myName e aboutMe.

console.log(myName); // ["Sofela", "is", "my", "real"]

console.log(aboutMe); // ["Oluwatobi", "Sofela", "is", "my", "name."]

Provalo su StackBlitz

Il contenuto aggiornato di myName non è rispecchiato in aboutMe, perché spread non ha creato nessun riferimento tra l'array originale e quello duplicato.

Cosa succede se myName contiene elementi non primitivi?

Supponi che myName contenga elementi non primitivi. In tal caso, spread crea un riferimento tra l'originale non primitivo e quello clonato.

Ecco un esempio:

const myName = [["Sofela", "is", "my"]];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// L'invocazione restituisce:
[ "Oluwatobi", ["Sofela", "is", "my"], "name." ]

Provalo su StackBlitz

Osserva che myName contiene un valore non primitivo.

Quindi, usare l'operatore spread per clonare il contenuto di myName in aboutMe fa sì che il computer crei un riferimento tra i due array.

Qualsiasi alterazione che fai alla copia di myName si rifletterà sulla versione di aboutMe e viceversa.

Come esempio, aggiungiamo contenuto ulteriore a myName:

myName[0].push("real");

Ora, controlliamo lo stato attuale di myName e di aboutMe:

console.log(myName); // [["Sofela", "is", "my", "real"]]

console.log(aboutMe); // ["Oluwatobi", ["Sofela", "is", "my", "real"], "name."]

Provalo su StackBlitz

Il contenuto aggiornato di myName si riflette in aboutMe, perché l'operatore spread ha creato un riferimento tra l'array originale e quello duplicato.

Ecco un altro esempio:

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName };

myName.firstName = "Tobi";

console.log(myName); // { firstName: "Tobi", lastName: "Sofela" }

console.log(bio); // { firstName: "Oluwatobi", lastName: "Sofela" }

Provalo su StackBlitz

In quest'esempio, l'aggiornamento di myName non si è riflettuto in bio perché abbiamo usato l'operatore spread su un oggetto che contiene solo valori primitivi.

Nota: Uno sviluppatore direbbe che myName è un oggetto mono-dimensionale perché contiene solo elementi primitivi.

Ecco un altro esempio:

const myName = { 
  fullName: { firstName: "Oluwatobi", lastName: "Sofela" }
};

const bio = { ...myName };

myName.fullName.firstName = "Tobi";

console.log(myName); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

console.log(bio); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

Provalo su StackBlitz

In questo caso, l'aggiornamento di myName si riflette in bio perché usiamo l'operatore spread su un oggetto che contiene un valore non primitivo.

Note:

• Chiamiamo myName oggetto profondo perché contiene elementi non primitivi.
• Quando cloni un oggetto in un altro, fai una copia superficiale. Per esempio, ...myName produce una copia superficiale dell'oggetto perché qualsiasi alterazione di un oggetto si riflette sull'altro.
• Quando cloni oggetti senza creare riferimenti, fai un copia profonda . Ad esempio, potrei copiare myName in bio facendo const bio = JSON.parse(JSON.stringify(myName)). In questo modo, il computer clonerà myName in bio senza creare riferimenti.
• Puoi interrompere il riferimento tra due oggetti sostituendo l'oggetto fullName all'interno di myName o bio con un nuovo oggetto. Ad esempio, con myName.fullName = { firstName: "Tobi", lastName: "Sofela" } interromperai il pointer tra myName e bio.

Per concludere

In quest'articolo, abbiamo parlato delle differenze tra gli operatori rest e spread, e grazie a degli esempi abbiamo visto come funzionano entrambi.

Grazie per aver letto quest'articolo!

Visual Studio Code è uno degli editor di codice più popolari esistenti. È gratuito, ha un'interfaccia pulita e ha innumerevoli estensioni che rendono programmare più facile e più divertente.

Sono uno sviluppatore frontend e uso VS Code mentre lavoro sul mio canale YouTube. In molti mi hanno chiesto qual è il modo per far sì che il browser si aggiorni automaticamente mentre programmo, senza usare il pulsante per ricaricare la pagina.

Beh, è possibile se configuri un'utile estensione in VS Code chiamata live-server. In questo post, ti spiegherò nel dettaglio come funziona e come impostare e configurare un live server in VS Code.

Perché dovrei usare l'estensione live-server?

Di solito, quando fai un cambiamento nel tuo codice o scrivi qualcosa di nuovo, hai bisogno di ricaricare la pagina manualmente per vedere i cambiamenti.

In altre parole, se fai 100 modifiche al tuo codice ogni giorno, devi ricaricare la pagina 100 volte.

The live-server extension, however, automates this for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.

L'estensione live-server invece, automatizza questa operazione per te. Dopo averla installata, un localhost automatizzato verrà eseguito nel tuo browser, grazie a un singolo pulsante.

Una volta che apporti dei cambiamenti nel tuo codice o scrivi qualcosa di nuovo, dopo aver salvato, il browser ricaricherà la pagina automaticamente. Così potrai vedere i cambiamenti velocemente e automaticamente.

Se preferisci, puoi vedere il video tutorial qui sotto:

Installa VS Code

Puoi saltare questa parte se hai già installato VS Code sul tuo computer. Altrimenti, puoi scaricarlo dal sito ufficiale.

Dopo che hai scaricato e installato VS Code, vedrai la schermata di benvenuto:

Sul lato sinistro, dovresti vedere alcune icone. Una di quelle (sotto l'icona "no bugs") è il pulsante estensioni:

Dopo averlo premuto, apparirà una barra di ricerca. Digita semplicemente "live server".

Vedrai molte opzioni, così da poter scegliere quella che funziona per il tuo sistema. Io uso Live Server di Ritwick Dey, quindi continuiamo con quella in questo esempio:

Clicca sul pulsante "Install" per installare l'estensione.

Crea una nuova pagina HTML

Per iniziare il live server, assicurati di aver creato almeno una pagina HTML. Per fare ciò, clicca sul pulsare file in cima, poi scegli il pulsante nuovo file e digita index.html:

Problemi di configurazione

Dopo aver creato la pagina HTML e installato l'estensione dovresti vedere un'icona "Go Live" in basso nel campo blu:

Se non la vedi, riavvia VS Code. Poi dovrebbe funzionare.

Clicca sul pulsante "Go Live" e il localhost (assegnato a un numero di porta) dovrebbe partire sul tuo browser. Puoi far partire e fermare il live server in ogni momento premendo sullo stesso pulsante.

Se hai raggiunto questo step, congratulazioni! :) Ora puoi lavorare con il live-server. Altrimenti, se stai ancora avendo problemi, guarda questo post per maggiori informazioni.

Grazie per aver letto quest'articolo! Spero che ti aiuti a installare e configurare l'estensione live server in VS Code.

I programmatori usano l'operatore ternario per prendere decisioni al posto delle più lunghe espressioni condizionali if ed else.

L'operatore ternario accetta tre argomenti:

1. Il primo è l'argomento di comparazione
2. Il secondo è il risultato per una comparazione vera
3. Il terzo è il risultato per una comparazione falsa

Potresti pensare all'operatore ternario come a un modo breve per scrivere una espressione if-else. Ecco un piccolo esempio decisionale usando if e else:

int a = 10, b = 20, c;

if (a < b) {
    c = a;
}
else {
    c = b;
}

printf("%d", c);

Questo esempio occupa più di 10 righe, ma non è necessario che sia così lungo. Puoi scrivere questo programmino in tre righe di codice usando un operatore ternario.

Sintassi

condizione ? valore_se_vero : valore_se_falso

L'espressione diventa valore_se_vero se condizione è vera, e valore_se_falso altrimenti.

Ecco l'esempio sopra riscritto usando l'operatore ternario:

int a = 10, b = 20, c;

c = (a < b) ? a : b;

printf("%d", c);

L'output dell'esempio sarà:

10

c prende il valore di a, perché la condizione a < b è vera.

Ricorda che gli argomenti valore_se_vero e valore_se_falso devono essere dello stesso tipo e possono essere solo espressioni semplici.

Gli operatori ternari possono essere annidati proprio come le espressioni if-else. Considera il seguente codice:

int a = 1, b = 2, ans;
if (a == 1) {
    if (b == 2) {
        ans = 3;
    } else {
        ans = 5;
    }
} else {
    ans = 0;
}
printf ("%d\n", ans);

Ecco il codice sopra riscritto usando un operatore ternario annidato:

int a = 1, b = 2, ans;
ans = (a == 1 ? (b == 2 ? 3 : 5) : 0);
printf ("%d\n", ans);

L'output di entrambi i codici qui sopra è:

3

VSCode ha un sacco di ottime estensioni e Live Server è una delle migliori.

Con appena un paio di click, Live Server ti permette di vedere la tua pagina live in un browser vero e proprio. Meglio ancora, ricarica automaticamente la pagina quando aggiorni il tuo codice, così i cambiamenti sono visibili subito sul browser.

Tutto quello che devi fare è fare clic col tasto destro nel file HTML che vuoi vedere, quindi selezionare "Apri in Live Server":

E se il Live Server non si apre nel browser e non mostra la pagina come ti aspetti? Se stai avendo questo problema, ecco alcune cose che puoi provare.

Riavvia VSCode

A volte la cosa migliore che puoi fare è riaprire VSCode da zero.

Prima di tutto, salva tutto il tuo lavoro. Poi chiudi VSCode, fermando così anche tutte le estensioni che hai installato.

Poi riapri VSCode e prova di nuovo, vai al file HTML che vuoi vedere, clicca col pulsante destro e seleziona "Apri in Live Server".

Imposta il browser per il Live Server

È possibile che l'estensione funzioni, ma che il tuo sistema non abbia un browser di default.

Anche se hai impostato un browser di default per il tuo sistema, non può far male dire al Live Server quale browser vuoi usare in maniera esplicita.

Come prima cosa, apri la Command Pallete con F1, poi digita Preferences: Open Settings (JSON) e seleziona questa opzione.

Questo aprirà il file di impostazioni settings.json di VSCode.

Scorri alla fine del file, aggiungi una virgola dopo l'ultima impostazione e incolla "liveServer.settings.CustomBrowser": "chrome":

Nota che puoi anche usare "firefox", "safari" o qualsiasi altro browser come valore per l'impostazione "liveServer.settings.CustomBrowser".

Infine, salva il file settings.json e prova di nuovo a eseguire Live Server.

Imposta il browser di default per il sistema operativo

Anche dopo aver detto al Live Server quale browser vuoi usare, è possibile che non stia comunque aprendo la pagina nel browser correttamente.

La prossima cosa da fare è impostare il browser di default del sistema operativo stesso.

Il metodo esatto per farlo può variare in base al tuo sistema operativo, quindi è meglio fare una ricerca per scoprire come farlo se non ne sei sicuro.

Ecco come appare la pagina delle impostazioni in Windows:

Vai alla pagina live manualmente

Se per qualche ragione il Live Server non sta ancora aprendo la pagina nel browser automaticamente, non preoccuparti. Puoi sempre aprire il browser di tua scelta e vedere la pagina direttamente.

Apri il tuo browser preferito e vai a http://127.0.0.1:5500/<your_file_name>.

Per esempio, se il tuo file si chiama index.html, vai a http://127.0.0.1:5500/index.html.

Se il Live Server è in esecuzione, dovresti vedere la pagina.

Per concludere

Queste sono alcune delle cose che puoi provare se il Live Server non sta funzionando nel modo in cui ti aspetti.

Buona programmazione!

Ci sono quattro modi per impostare una proprietà di stile backgroundImage usando il CSS in linea in React.

Questo tutorial ti mostrerà i quattro metodi, con del codice di esempio per ognuno.

Come impostare un'immagine di sfondo in React usando un URL esterno

Se la tua immagine si trova da qualche parte online, puoi impostare l'immagine di sfondo del tuo elemento mettendo l'URL in questo modo:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

Il codice sopra renderizzerà un singolo elemento div con lo style background-image: url(https://via.placeholder.com/500) applicato ad esso.

Come impostare un'immagine di sfondo in React dalla tua cartella /src

Se crei l'applicazione usando Create React App e hai le tue immagini nella cartella src/, puoi prima importare l'immagine e poi piazzarla come sfondo del tuo elemento:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Quando esegui il comando npm start, React mostrerà un errore "Failed to Compile" e fermerà il build quando l'immagine non viene trovata:

In questo modo non mostrerai link di immagini mancanti nella tua app web. Nel codice qui sopra, il valore di backgroundImage è impostato usando una stringa template, che permette di incorporare un'espressione JavaScript.

Come impostare un'immagine di sfondo in React usando il metodo dell'URL relativo

La cartella public/ in Create React App può essere usata per aggiungere risorse statiche nella tua applicazione React. Qualsiasi file metti in questa cartella sarà accessibile online.

Puoi quindi assegnare l'URL relativo al tuo indirizzo di host per impostare l'immagine di sfondo. Ecco un esempio:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Impostando il path dell'URL a /image.png come nell'esempio qui sopra, il browser cercherà l'immagine di sfondo in <your host address>/image.png.

Puoi anche creare un'altra cartella dentro public/ se vuoi organizzare le tue immagini in cartelle. Per esempio:

Non dimenticarti di aggiustare il valore di backgroundImage in url(/img/image.png) se decidi di creare la cartella.

Impostare un'immagine di sfondo in react usando il metodo dell'URL assoluto

Puoi anche includere l'URL assoluto usando la variabile di ambiente di Create React App PUBLIC_URL in questo modo:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Quando esegui questo sul tuo computer, gli script di React gestiscono il valore di PUBLIC_URL. Quando lo esegui in locale, apparirà come un URL relativo invece di un URL assoluto:

L'URL assoluto sarà visto solo una volta fatto il deployment di React in una applicazione di produzione.

Come impostare un'immagine di sfondo con proprietà aggiuntive

Se vuoi personalizzare ulteriormente l'immagine di sfondo, lo puoi fare aggiungendo proprietà addizionali dopo backgroundImage. Ecco un esempio:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Le proprietà impostate aggiungeranno background-repeat: no-repeat e width: 250px assieme allo stile background-image all'elemento div.

Grazie per aver letto, spero che quest'articolo ti sia stato utile. 🙂

Diciamo che hai una lista che contiene alcuni numeri duplicati:

numbers = [1, 1, 2, 3, 3, 4]

Ma invece vuoi una lista di numeri unici.

unique_numbers = [1, 2, 3, 4]

Ci sono alcuni modi diversi per ottenere una lista di valori unici in Python. Questo articolo ti mostrerà come.

Opzione 1 – Usare un Set per ottenere elementi unici

Usare un set è un modo per farlo. Un set è utile perché contiene elementi unici.

Puoi usare un set per ottenere elementi unici e poi, trasformare il set in una lista.

Guardiamo a due approcci che usano un set e una lista. Il primo approccio è "verbose" ma è utile per vedere cosa sta accadendo ad ogni step.

numbers = [1, 2, 2, 3, 3, 4, 5]


def get_unique_numbers(numbers):

    list_of_unique_numbers = []

    unique_numbers = set(numbers)

    for number in unique_numbers:
        list_of_unique_numbers.append(number)

    return list_of_unique_numbers


print(get_unique_numbers(numbers))
# result: [1, 2, 3, 4, 5]

Diamo un'occhiata più dettagliata a cosa sta succedendo. Partiamo dalla lista di numeri, numbers. Passo questo lista a una funzione, get_unique_numbers.

Dentro questa funzione creo una lista vuota, che alla fine conterrà tutti i numeri unici. Poi, uso un set per ottenere i numeri unici dalla lista numbers.

unique_numbers = set(numbers)

Ho quello di cui ho bisogno: i numeri unici. Ora ho bisogno di mettere questi valori in una lista. Per farlo, uso un loop per iterare su ogni numero nel set.

for number in unique_numbers:
       list_of_unique_numbers.append(number)

Ad ogni iterazione aggiungo il numero corrente alla lista, list_of_unique_numbers. Infine, ottengo la lista alla fine del programma.

C'è un modo più breve di usare un set e una lista per ottenere valori unici in Python. Questo è ciò che vedremo nella prossima sezione.

Un approccio più breve con set

Tutto il codice scritto sopra può essere condensato in una singola riga con l'aiuto delle funzioni integrate di Python.

numbers = [1, 2, 2, 3, 3, 4, 5]
unique_numbers = list(set(numbers))
print(unique_numbers)
# Result: [1, 2, 3, 4, 5]

Anche se questo codice appare molto diverso dal primo esempio, l'idea è la stessa. Usare un set per ottenere i numeri unici. Poi, trasformare il set in una lista.

unique_numbers = list(set(numbers))

Leggendo il codice qui sopra, è utile pensare "dall'interno verso l'esterno". Il codice più interno viene valutato prima: set(numbers). Poi, viene valutato il codice più esterno: list(set(numbers)).

Opzione 2 – Usare l'iterazione per identificare valori unici

L'iterazione è un altro approccio da considerare.

L'idea principale è creare una lista vuota che conterrà i numeri unici. Poi, usare un loop per iterare su ogni numero nella data lista. Se il numero è già nella lista unica, allora il loop passerà alla prossima iterazione. Altrimenti, il numero verrà aggiunto alla lista.

Consideriamo due modi di usare l'iterazione per ottenere i valori unici da una lista, iniziando con il metodo più verbose.

numbers = [20, 20, 30, 30, 40]


def get_unique_numbers(numbers):
    unique = []

    for number in numbers:
        if number in unique:
            continue
        else:
            unique.append(number)
    return unique


print(get_unique_numbers(numbers))
# Result: [20, 30, 40]

Ecco cosa sta succedendo in ogni step. Partiamo ancora dalla lista di numeri assegnata, numbers. Passo questa lista alla funzione, get_unique_numbers.

Dentro questa funzione, creo una lista vuota, unique. Alla fine, questa lista conterrà tutti i numeri unici.

Uso un loop for per iterare su ogni numero nella lista numbers.

 for number in numbers:
       if number in unique:
           continue
       else:
           unique.append(number)

Il condizionale dentro il loop verifica se il numero dell'iterazione corrente è nella lista unique. Se è così, il loop continua alla prossima iterazione. Altrimenti, il numero viene aggiungo alla lista.

Ecco il punto importante: solo i numeri unici sono aggiunti. Alla fine del loop, ottengo la lista unique che contiene tutti i numeri unici.

Un metodo più breve con l'iterazione

C'è un altro modo per scrivere questa funzione in meno righe.

numbers = [20, 20, 30, 30, 40]


def get_unique_numbers(numbers):
    unique = []
    for number in numbers:
        if number not in unique:
            unique.append(number)
    return unique
#Result: [20, 30, 40]

La differenza è il condizionale. Questa volta è scritto in questo modo: se il numero non è presente in unique, allora aggiungilo.

if number not in unique:
    unique.append(number)

Altrimenti, il loop andrà avanti al prossimo numero della lista numbers.

Il risultato è lo stesso. Però, è a volte più difficile pensare al codice e leggerlo quando contiene not.

Ci sono altri modi per trovare i valori unici in una lista di Python, ma probabilmente ti troverai a usare uno degli approcci spiegati in questo articolo.