Grazie per condividere la tua esperienza e le tue intuizioni con la comunità degli sviluppatori.

La nostra pubblicazione ti aiuterà ad istruire ed ispirare sviluppatori, designer e data scientist in tutto il mondo.

freeCodeCamp.org è uno dei siti di tecnologia più visitati del web e può aiutarti a raggiungere migliaia di persone che beneficeranno della tua saggezza.

La nostra no profit ha anche una grande presenza sui social media, forte accessibilità, SEO, e una solida reputazione come seria risorsa di apprendimento. Tutto ciò si tradurrà in più lettori per i tuoi articoli.

In questa guida di stile ti daremo consigli su come massimizzare il tuo impatto rendendo i tuoi articoli più efficaci possibile.

Questo non è il posto per sfide del tipo "un post al giorno" o post di osservazione stile flusso di coscienza.

Porta i tuoi fatti. Porta le tue citazioni. Porta i tuoi frammenti di codice. Porta le tue visualizzazioni di dati.

Anni di dati mostrano che quanto più un articolo va in profondità, tanto più a lungo una persona lo leggerà, e tanto più probabilmente lo condividerà con i suoi amici.

Se non sei in grado di scrivere almeno 500 parole sul tuo argomento, prova a fare un po' più di ricerca su di esso.

Immergendoti e ampliando la tua ricerca, sarai in grado di fornire maggiori informazioni ai tuoi lettori.

Le persone sono impegnate. Quindi devi catturare immediatamente la loro attenzione. Come puoi farlo? Con un titolo avvincente.

Il Titolo: L'unica parte del tuo articolo che verrà letta dal 100% delle persone

Prima che tu inizi a scrivere la tua storia, spendi del tempo a comporre un titolo avvincente. L'intero articolo scaturirà quindi da quel titolo e vi si ricollegherà per sostenerlo.

Durante gli ultimi 7 anni, abbiamo sperimentato diversi format. Abbiamo riscontrato che i tutorial tecnici approfonditi sono i più utili per i milioni di sviluppatori che leggono la nostra pubblicazione in tutto il mondo.

Ecco alcune strutture di titoli che abbiamo scoperto funzionare bene per i tutorial:

• "Come aggiustare…"
• "Come costruire…"
• “Come fare [attività] con [strumento]”
• "Come funziona [qualcosa]"
• "La guida [aggettivo] per…"
• “Cosa è [nome]? In parole semplici, per favore.”
• “Cosa è esattamente un [nome]?”
• “Perché [qualcosa] è importante.”
• “Impara [qualcosa] in N ore”
• "Una storia di [qualcosa]”
• “La storia dietro [qualcosa]”
• "Il manuale [qualcosa]" (per tutorial più lunghi di almeno 20,000 parole)

Aggiungi un'immagine di copertina

Una volta scelto il tuo titolo chiaro ed esaustivo, aggiungi una bella immagine di copertina. Clicca l'ingranaggio nell'angolo in alto a destra.

Alcuni contributori creano le loro immagini di copertina per i loro articoli. Un sito gratuito come Canva.com può aiutarti con questo procedimento. (Se vuoi evitare che i bordi della tua immagine vengano tagliati quando il tuo articolo è condiviso su Facebook o Twitter, usa un rapporto di aspetto dell'immagine di 1.91:1.)

Alcune cose da tenere a mente quando crei un'immagine di copertina:

• Usa colori con un bel contrasto in modo da far risaltare immagini e testo
• Non usare troppo testo nelle immagini – concentrati sul soggetto o sulle parole chiave principali (ad esempio, invece di usare tutto il testo: "Come costruire una app per ordinare cibo da asporto con React", potresti solo dire "Come costruire una app con React".)
• In generale, ricorda: semplice di solito è meglio per le immagini di copertina. Ciò che vuoi è un'immagine accattivante e facile da vedere/leggere su dispositivi più piccoli.
• Puoi usare le tue immagini di copertina come aiuto per costruire ilo tuo "brand" come scrittore. Se crei delle immagini con uno stile particolare, le persone inizieranno a riconoscere i tuoi tutorial soltanto dall'immagine di copertina.

Se non hai un'immagine, puoi scaricare un'immagine senza bisogno di attribuzione da un sito come Pexels, Unsplash, o Wikipedia, salvarla e poi caricarla su Ghost.

Per favore, non creare hotlink a immagini. Invece, scarica ogni immagine che vuoi usare e trascinala nel tuo articolo su Ghost. In questo modo freeCodeCamp può servire le immagini attraverso i propri affidabili CDN (per una migliore prestazione e accessibilità). Per favore cerca di tenere la dimensione delle immagini sotto 1MB.

Imposta l'URL del tuo post

Puoi impostare l'URL del tuo articolo direttamente. Raccomandiamo di tenerlo corto e descrittivo come “machine-learning-with-pytorch-tutorial” o “from-retail-worker-to-software-developer”.

Scegli i tuoi tag

Puoi scegliere da uno a cinque tag per il tuo articolo. Una volta che li hai scelti, fallo sapere al team editoriale e li aggiungeremo per te.

Questi tag renderanno più facile per i lettori scoprire i tuoi articoli attraverso la ricerca e la navigazione dei tag.

Il primo tag che scegli è il più importante, e verrà mostrato sopra l'articolo, così.

Per favore non cambiare nessuna delle meta-informazioni nel menù. La nostra pubblicazione ha dei valori predefiniti adatti per questi.

Consigli per scrivere un articolo che le persone leggeranno davvero

Grammatica, spelling e formattazione sono importanti

Leggere articoli che sono chiari e ben formattati è più facile. Ecco alcuni consigli per rendere i tuoi articoli più leggibili possibile:

• Mantieni la semplicità. Usa un linguaggio semplice e diretto dove possibile.
• Usa frasi brevi. Dividi le frasi più lunghe in frasi più brevi. Questo aiuterà le persone e leggere più velocemente e capire meglio.
• Usa paragrafi brevi. Dividi i paragrafi lunghi in paragrafi di una o due frasi. I muri di testo faranno abbandonare l'articolo ai tuoi lettori o li faranno passare alla modalità "scrematura".
• Pulisci la punteggiatura. Troppi punti esclamativi creano distrazione!!! I punti e virgola sono raramente necessari; usa un punto e basta. E i puntini di sospensione sono... beh... di solito un po' troppo.
• Usa dei sottotitoli per strutturare il tuo testo. La nostra pubblicazione offre intestazioni grandi e piccole per il tuo toolkit. Usa le intestazioni grandi per gli argomenti principali, e le sotto-intestazioni più piccole per le sezioni all'interno di questi argomenti.
• Non fare un uso eccessivo di grassetto, corsivo o entrambi. Troppa formattazione rende il testo difficile da leggere. Specialmente se usi grassetto e corsivo insieme. Usa grassetto e corsivo separatamente e sporadicamente.
• Rimuovi le abbreviazioni. Rendono gli articoli più difficili da capire. Scrivi per esteso ogni acronimo che non è ben noto. Cambia le espressioni latine come "e.g" in "ad esempio" e "...ecc." in "come...".

Rileggi il tuo articolo. Poi rileggilo ancora.

Alcuni contributori scrivono rapidamente in modo da mettere le proprie idee su carta velocemente. Altri contributori svolgono tutta la loro ricerca prima di scrivere una sola parola.

Qualunque sia il tuo processo di scrittura, assicurati di allontanarti dal tuo articolo e tornarci con uno sguardo nuovo.

Rileggi il tuo articolo. Poi leggilo ad alta voce. Sarai sorpreso da quanti piccoli errori, errori di ortografia, e frasi sgraziate incontrerai.

Evidenzia la sintassi del tuo codice

Puoi creare un blocco di codice digitando tre backtick (```), seguite da uno spazio.

Puoi anche specificare il linguaggio di programmazione con cui vuoi evidenziare la sintassi.

Ad esempio, digitare ```js ti darà la colorazione della sintassi JavaScript. E supportiamo anche la colorazione della sintassi di una dozzina di altri linguaggi di programmazione popolari.

Rimani in tema

Il tempo dei tuoi lettori non è infinito. Aiuta i tuoi lettori a ottenere quanto più valore possibile dai tuoi articoli prima che debbano andare avanti con le loro vite.

Mantieni i tuoi articoli tecnici approfonditi in ogni loro sezione

1. Scrivi un'introduzione concisa che dice ai lettori cosa realizzeranno.
2. Usa una lista numerata come questa per indicare i passaggi.
3. Inserisci quanti più dettagli possibile.
4. Chiudi ricordando ai lettori cosa hanno realizzato.

Scrivi lunghi articoli comprensivi di tutto invece di articoli divisi per parti

Abbiamo osservato più e più volte che le persone non si preoccuperanno di leggere la seconda, la terza o l'ennesima parte di una serie se non hanno letto tutte le parti precedenti.

Allo stesso tempo, abbiamo visto che gli articoli molto lunghi e approfonditi funzionano sorprendentemente bene. Le persone inseriranno il tuo articolo tra i preferiti o lo condivideranno sui social media per poi tornarci in seguito.

Quando le persone vedono che un articolo è lungo, assumeranno spesso che è serio e completo. Questo ispira le persone a rallentare e spendere davvero del tempo leggendo il tuo articolo. Molte persone apriranno persino un editor di codice e programmeranno a casa.

Mantienilo quanto più adatto a tutti possibile

La comunità di freeCodeCamp è principalmente composta da adulti, ma ci sono anche bambini.

Cerca di non usare volgarità a meno che non sia in una citazione diretta, e stai alla larga da meme potenzialmente offensivi.

Infine, se un articolo sembra violare il codice di condotta, lo cancelleremo immediatamente. Ma ne salveremo una copia e te la invieremo ad uso personale, così che tu non perda il tuo lavoro.

Usa immagini senza attribuzione necessaria o immagini che hai creato tu

Puoi includere screenshot e altre immagini che hai creato da te. Ma se non possiedi i diritti dell'immagine, usa un'immagine simile che però non ha bisogno di attribuzione. Queste non richiedono costi di licenza o attribuzione.  

Di nuovo, se hai bisogno un'immagine di stock, alcuni siti web dove puoi trovare queste immagini sono Pexels, Unsplash e Wikipedia.

Inoltre, come promemoria, per favore non usare hot-link a immagini. Invece, scarica ogni immagine che vuoi usare nel tuo tutorial e trascinala su Ghost. In questo modo, freeCodeCamp può fornire le immagini attraverso i nostri CDN affidabili (per una prestazione e un'accessibilità migliori). E per favore, cerca anche di mantenere la dimensione delle immagini sotto 1 MB.

Alcune immagini – come i webcomic – sono create pensando alla condivisione. Per queste, puoi inserire l'immagine e poi dire "Image credit: XKCD" con un link alla specifica pagina del webcomic.

Cita sempre le tue fonti e non plagiare.

Il plagio si verifica quando qualcuno fa passare il lavoro scritto di qualcun altro (o un'immagine, del codice e così via) come proprio. È un reato grave che rende le persone passibili di licenziamento dal lavoro ed espulsione da scuola. E viene preso altrettanto seriamente anche nelle pubblicazioni di freeCodeCamp.

Poche persone sono state così sfacciate da tentare il plagio sulle pubblicazioni di freeCodeCamp. Ma ce ne sono state alcune negli scorsi 7 anni. Le abbiamo intercettate, abbiamo rimosso i loro articoli e li abbiamo bannati a vita dalla comunità.

Non preoccuparti – non plagerai niente accidentalmente. Il plagio è un atto intenzionale.

Come citare le tue fonti in modo adeguato

Se stai parafrasando (o citando direttamente) qualcosa che qualcuno ha detto in un altro articolo, video, corso o altro mezzo, dovresti citarlo. Questo significa aggiungere un link alla fonte originale e usare la formattazione con le virgolette, così:

"Questo gioco è controllato interamente digitando in un'interfaccia a riga di comando. Poiché il gioco è in real time, questo può portare a momenti intensi di digitazione rapida dei comandi quando cerchi di salvare i tuoi droni dai pericoli." (Fonte: Quincy Larson)

Questo include testo (o codice) preso da documentazione ufficiale, StackOverflow, GitHub e altre risorse simili. Se stai copiando e incollando qualcosa da una fonte simile, assicurati di citarlo a linkarlo.

Attribuisci sempre citazioni alle persone che le hanno dette in origine. Se si tratta di una citazione su più righe, puoi utilizzare formattazione a citazione come questa per suddividere i paragrafi più lunghi:

“Quando hai intelletto di tuo, è un piacere dare credito agli altri per il proprio.”
― Criss Jami

Se il tuo codice è pesantemente ispirato (o preso in prestito) da quello di qualcun altro, dovresti dargli credito.

Prima di pubblicare un articolo che si appoggia pesantemente sul lavoro di qualcun altro, chiediti: il mio articolo espande sostanzialmente il lavoro di quella persona? Se no, potrebbe non esserci bisogno di un articolo.

Una nota finale sull'utilizzo delle parole di altre persone: è sempre meglio usare le proprie ogni volta che puoi. Quindi, invece di copiare/incollare e quotare le fonti eccessivamente, cerca di digerire le informazioni e spiegarle con parole tue. Ti aiuterà a capirle meglio e non rischierai di plagiare il lavoro di qualcun altro.

Ma se proprio devi citare o prendere in prestito da un altra fonte, assicurati di farlo correttamente.

Alcuni esempi di plagio

Qui ci sono un paio di esempi di plagio – cioè, cosa non fare. Il primo dovrebbe essere abbastanza chiaro (è copiato parola per parola):

Testo originale:

Solo una breve nota prima di iniziare: l'interfaccia desktop e l'app mobile di Instagram sono piuttosto diverse. La maggior parte delle persone usa Instagram sul proprio dispositivo mobile (tramite l'app Instagram) perché è lì che puoi postare foto.  (Fonte: Abbey Rennemeyer)

Testo plagiato:

Ok, tutti pronti a conoscere Instagram? Andiamo!

Solo una breve nota prima di iniziare: l'interfaccia desktop e l'app mobile di Instagram sono piuttosto diverse. La maggior parte delle persone usa Instagram sul proprio dispositivo mobile (tramite l'app Instagram) perché è lì che puoi postare foto.

Ora che lo abbiamo chiarito, siamo pronti a partire.

Come puoi vedere, il testo plagiato è inserito in mezzo a del testo originale. È allettante aggiungere frasi o paragrafi che qualcun altro ha scritto davvero bene. Ma a meno che tu non citi quelle parti, si tratta di plagio.

Il secondo esempio, qui sotto, potrebbe non essere altrettanto evidente. Ma se stai parafrasando strettamente le parole di qualcun altro, è comunque plagio.

Testo originale:

Ci sono molti motivi per cui potresti voler condividere foto e video su Instagram.

Magari stai avviando un'attività o lanciando un prodotto. Potresti voler lavorare per una compagnia che vuole avere una presenza Instagram. Magari vuoi creare un tuo brand personale come fotografo, viaggiatore, o artista. O vuoi solo condividere ciò che ti piace al momento tramite immagini.

Qualunque sia la ragione, Instagram è un ottimo posto per condividere idee, messaggi, e arte online. (Fonte)

Testo plagiato:

Ci sono molte ragioni per pubblicare foto e video su Insta.

Magari stai avviando la tua attività o lanciando qualche prodotto. Magari lavori per un'organizzazione che vuole avere una presenza su Instagram. O magari vuoi creare il tuo brand. O vuoi solo condividere ciò che stai facendo adesso tramite immagini.

In ogni caso, Instagram è un ottimo posto su cui postare idee, messaggi e arte online.

Come puoi vedere, il testo qui sopra è pesantemente basato sul testo originale. Può cambiare qualche parola, o lasciarne fuori qualcuna, ma è chiaro che la persona non lo ha scritto da sola. Di nuovo, questo non va bene e verrebbe considerato plagio.

Se hai domande su cosa costituisce un plagio, fai qualche ricerca e assicurati di sapere come citare correttamente le tue fonti e creare un lavoro originale.

Nessun cross-posting, per favore.

Il cross-posting generalmente è inefficace. Se vuoi che molte persone leggano il tuo articolo, ti raccomandiamo di pubblicarlo con una singola pubblicazione – sia essa quella di freeCodecamp, il tuo blog, o una rivista online.

Un paio di eccezioni:

• Può valere la pena eseguire il cross-posting di un articolo all'interno di un ambiente controllato (che non è indicizzato da Google) come LinkedIn.
• Se vuoi mettere in evidenza i tuoi scritti provenienti da altre pubblicazioni sul tuo blog affinché i potenziali datori di lavoro possano vederli, puoi eseguire il cross-post sul tuo blog e utilizzare semplicemente un URL canonico per puntare alla pubblicazione originale. Questo ridurrà la probabilità che Google si confonda e mostri la versione sbagliata tra i suoi risultati.

Puoi comunque prendere alcuni dei tuoi lavori dal tuo blog personale su un argomento simile (tipo "Plugin di Visual Studio" o "Comandi Bash Avanzati") e raccoglierli in un unico, lungo articolo di freeCodeCamp.

La nostra filosofia è che, poiché passeremo ore a istruirti sul tuo articolo, modificarlo meticolosamente e pubblicizzarlo alla grande comunità di freeCodeCamp, ti chiediamo di non pubblicarlo in cross-posting su siti di pubblicazione libera come Medium.

Modi accettabili di pubblicizzarti nei tuoi articoli

freeCodeCamp.org è una organizzazione no-profit supportata da donatori. Non vogliamo dare l'impressione di avere "posizionamenti pubblicitari pagati" (non ne abbiamo) poiché questo potrebbe scoraggiare le persone dal farci donazioni.

Allo stesso tempo, capiamo bene che potresti voler pubblicizzare il tuo ultimo libro, corso o applicazione SaaS, incoraggiare le persone a iscriversi alla tua mailing list o a seguirti su Twitter.

Ti chiediamo di mantenere ciò quanto più elegante possibile. Va bene inserire una frase con una call-to-action al tuo prodotto alla fine del tuo articolo.

Non aprire il tuo articolo con un link al tuo prodotto, questo sembra spam. E non usare link affiliati nei tuoi articoli a meno che non siano link a libri o corsi che hai creato personalmente.

Tieni inoltre presente che non accettiamo account relativi a marchi. Proibiamo ogni sorta di ghostwriting. E non trasferiamo articoli da un impiegato di una compagnia a un altro.

E per favore – non scrivere storie per conto di altre persone che non si sono ancora guadagnate il loro account di contributore di freeCodeCamp.

Nota che per i tuoi scopi di SEO – a differenza della maggior parte dei siti popolari – tutti i link sulle nostre pubblicazioni sono rel="doFollow". Ciò significa che sì – ogni pagina a cui fai un collegamento (incluso un tu blog) otterrà un vantaggio nelle classifiche Google. Tienilo a mente e non te ne approfittare troppo.

Completare il processo

Una volta che sei sicuro che la storia sia pronta per i lettori, manda per email un link alla tua bozza a ilenia@freecodecamp.org. Il nostro team editoriale la esaminerà rapidamente e apporterà delle modifiche per rafforzare ulteriormente il tuo articolo prima di pubblicarlo.

Le cose principali a cui teniamo sono il titolo e i paragrafi di apertura. Se notiamo problemi di formattazione del testo o errori grammaticali, correggeremo anche quelli.

Se pensiamo ancora che il tuo articolo necessiti di un lavoro significativo, te lo diremo e potrai inviarlo nuovamente dopo aver apportato le modifiche.

Infine, una nota importante: se un'azienda ti sta pagando per scrivere un articolo e poi provare a pubblicarlo su freeCodeCamp, per favore comunicalo al team editoriale quando invii la bozza.

Altri consigli utili

Markdown GitHub

Sapevi che puoi utilizzare il Markdown in stile Github per comporre i tuoi articoli?

Puoi incollare il markdown in /news e verrà istantaneamente convertito in testo formattato.

Puoi anche digitare la sintassi markdown all'inizio di una riga – ad esempio # o ## per le intestazioni, o * per gli elenchi puntati – per poi iniziare a scrivere. Il testo cambierà in accordo con il formato specificato.

Vai piano con gli embed

Puoi incorporare cose come i tweet e video Youtube, se vuoi. Clicca l'icona + all'inizio di una nuova riga, e puoi scegliere da una varietà di strumenti di incorporamento.

Detto ciò, ti incoraggiamo ad usarli di rado per tre motivi:

1. Gli embed fanno una chiamata a servizi esterni, come Twitter, che potrebbero rallentare l'esperienza
2. Molte persone che leggono le pubblicazioni lo fanno utilizzando i lettori dello schermo. Un'ampia porzione della comunità degli sviluppatori vive con disabilità visive (o cecità completa). Gli embed sono meno accessibili del testo.
3. Ogni articolo in pubblicazione ha una versione Accelerated Mobile Pages, e gli embed potrebbero non funzionare correttamente lì.

Se ancora non hai una account contributore, puoi richiederlo qui (o se vuoi pubblicare in inglese consulta la guida in inglese per i contatti corretti).

Grazie per aver condiviso le tue opinioni con la comunità degli sviluppatori.

Speriamo che questa guida ti aiuti a scrivere articoli migliori in modo che l'intera comunità possa beneficiare della tua conoscenza.

Buona programmazione!

— Il team editoriale di freeCodeCamp

Prima di rilasciare la nostra certificazione verificata ad un camper, lui o lei deve accettare il Giuramento di Onestà Accademica, che recita:

"Sono consapevole che plagiare significa copiare il lavoro di qualcun altro e presentare il lavoro come se fosse il mio, senza dare chiara attribuzione all'autore originale.

"Sono consapevole che il plagio è un atto di disonestà intellettuale, e che solitamente le persone vengono espulse dalle università o licenziate dal proprio lavoro, se vengono sorprese a plagiare.

"Oltre all'utilizzo di librerie Open Source come jQuery e Bootstrap, e brevi frammenti di codice chiaramente attribuiti all'autore originale, il 100% del codice nei miei progetti è stato scritto da me, o insieme ad un altro camper con il quale stavo programmando in coppia in tempo reale.

"Prometto di non aver plagiato nessuno dei miei lavori di freeCodeCamp. Sono consapevole che il team di freeCodeCamp verificherà i miei progetti per confermarlo"

Nelle situazioni in cui scopriamo istanze di palese plagio, sostituiremo il certificato del camper in questione con il messaggio "Upon review, this account has been flagged for academic dishonesty." ("Dopo la revisione, questo account è stato flaggato per disonestà accademica.").

Come istituzione accademica che garantisce certificazioni basate sui risultati, prendiamo l'onestà accademica molto seriamente. Se hai domande a proposito di questa politica, o sospetti che qualcuno la abbia violata, puoi mandare un'e-mail a team@freecodecamp.org, ed investigheremo.

Quando stai programmando in Javascript, potresti avere bisogno di verificare se un array è vuoto oppure no.

Per verificare se un array è vuoto oppure no, puoi usare la proprietà .length.

La proprietà length imposta o restituisce il numero di elementi in un array. Conoscendo il numero di elementi in un array, puoi dire se è vuoto oppure no. Un array vuoto avrà 0 elementi al suo interno.

Vediamo qualche esempio.

Esempio di sintassi con .length

const myArray = ['Horses', 'Dogs', 'Cats'];

Qui creiamo una variabile che punta ad un array.

Usando la proprietà length, possiamo controllare la lunghezza dell'array:

myArray.length

Questo restituirà 3, perché ci sono 3 oggetti nell'array.

Per controllare se l'array è vuoto oppure no con .length abbiamo tre possibilità.

.length esempio 1

Per prima cosa, creiamo un nuovo array con nessun elemento.

const arr = []

Adesso controlliamo se l'array è vuoto usando .length.

arr.length

Questo restituirà 0, visto che ci sono 0 elementi nell'array.

.length esempio 2

Possiamo anche controllare esplicitamente se l'array è vuoto oppure no.

if (arr.length === 0) { console.log("Array is empty!") }

Se il nostro array è vuoto, verrà stampato il messaggio sopra. Se l'array ha elementi all'interno, il codice all'interno dell'if non verrà eseguito.

Qui c'è un terzo modo per controllare se l'array è vuoto o no usando .length.

.length esempio 3

Combinando l'uso della proprietà length e dell'operatore logico Javascript "not", il simbolo "!", possiamo verificare se un array è vuoto o no.

L'operatore ! nega un'espressione. Cioè, possiamo usarlo per restituire true se un array è vuoto.

Per questo esempio, apriamo la nostra console Javascript. Per aprire la console Javascript in Chrome, puoi cliccare su  Ispeziona-> Console.

Per prima cosa, creiamo un array con nessun elemento all'interno.

Poi, utilizziamo l'operatore logico "not", insieme alla nostra proprietà .length, per testare se l'array è vuoto o no.

Se non avessimo utilizzato l'operatore "not", arr.length avrebbe restituito 0. Con l'operatore aggiunto, restituisce true se il suo operando è false. Poiché arr.length è 0, o falso, restituisce true.

Usiamo tutto ciò in nella condizione di un if, e stampiamo un messaggio se il nostro array è vuoto.

Quando controlliamo se un array è vuoto o no, è spesso meglio controllare se l'array è davvero un array.

Perché?

Perché può essere il caso in cui ti aspettavi di verificare la lunghezza di un array, ma invece ti viene dato un tipo diverso di dati, ad esempio una stringa:

Poiché la length property può essere usata su altri tipi di dati, è bene controllare anche che il tuo array sia davvero un array come ti aspettavi.

Ti suggerisco anche di usare il metodo Array.isArray() per confermare che il tuo array è un array. Questo metodo determina se ciò che gli viene passato è un array oppure no. Se ciò che è stato passato era un array, questo metodo restituirà true.

Aggiungiamo questo metodo al nostro esempio.

Come usare il metodo Array.isArray()

Conclusione

In questo articolo, abbiamo imparato che in Javascript puoi usare la proprietà length in più modi per verificare se un array è vuoto o no. La proprietà length restituisce il numero di oggetti in un array.

Abbiamo anche imparato che è meglio anche utilizzare il metodo Array.isArray quando usiamo la proprietà .length, per controllare se il valore passato è un array come ti aspetti.

Centrare gli oggetti è uno degli aspetti più difficili di CSS.

I metodi in sé non sono complicati da capire. Invece, è più a causa del fatto che ci sono molti modi di centrare gli oggetti.

Il metodo utilizzato può variare a seconda dell'elemento HTML che stai provando a centrare, o se lo stai centrando orizzontalmente o verticalmente.

In questo tutorial parleremo di come centrare diversi elementi orizzontalmente, verticalmente e sia orizzontalmente che verticalmente.

Come centrare orizzontalmente

Centrare elementi orizzontalmente è generalmente più facile che farlo verticalmente. Ecco alcuni elementi comuni che potresti voler centrare orizzontalmente e modi diversi per farlo.

Come Centrare del Testo con la Proprietà Text-Align Center di CSS

Per centrare del testo o dei link orizzontalmente, usa semplicemente la proprietà text-align con il valore center:

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

p {
  text-align: center;
}

Come Centrare un Div con Margin Auto in CSS

Usa la proprietà abbreviata margin con il valore 0 auto per centrare orizzontalmente elementi a livello di blocco, come un div:

<div class="container">
  <div class="child"></div>
</div>

.child {
  ...
  margin: 0 auto;
}

Come Centrare Orizzontalmente un Div con Flexbox

Flexbox è il modo più moderno per centrare gli oggetti nella pagina, e rende la progettazione di layout responsivi molto più facile di quanto non fosse in passato. Tuttavia, non è completamente supportato da alcuni browser più vecchi come Internet Explorer.

Per centrare un elemento orizzontalmente con Flexbox, applica semplicemente  display: flex e justify-content: center all'elemento genitore:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  justify-content: center;
}

Come Centrare Verticalmente

Centrare elementi verticalmente senza metodi moderni come Flexbox può essere davvero un lavoro ingrato. Qui vedremo per prima cosa alcuni dei vecchi metodi per centrare gli oggetti verticalmente, poi mostreremo come farlo con Flexbox.

Come Centrare Verticalmente un Div in CSS con il Posizionamento Assoluto e i Margini Negativi

Per molto tempo questo è stato il modo migliore per centrare le cose verticalmente. Per questo metodo devi conoscere l'altezza dell'elemento che vuoi centrare.

Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.

Poi, per l'elemento figlio, imposta la proprietà position a absolute e top a 50%:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente */
  position: absolute;
  top: 50%;
}

Ma questo centra verticalmente solo il bordo superiore dell'elemento figlio.

Per centrare davvero l'elemento figlio, imposta la proprietà margin-top a -(half the child element's height):

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* metà dell'altezza di questo elemento */
}

Come centrare Verticalmene un Div con Transform e Translate

Se non conosci l'altezza dell'elemento che vuoi centrare (o anche se la conosci) questo metodo è un trucco ingegnoso.

Questo metodo è molto simile al metodo dei margini negativi visto sopra. Imposta la proprietà position dell'elemento genitore a relative.

Nell'elemento figlio, imposta la proprietà position a absolute e imposta top a 50%. Adesso, invece di unsare un margine negativo per centrare davvero l'elemento figlio, usa semplicemente transform: translate(0, -50%):

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Nota che translate(0, -50%) è un'abbreviazione per translateX(0) and translateY(-50%). Potresti anche scrivere transform: translateY(-50%) per centrare l'elemento figlio verticalmente.

Come Centrare Verticalmente un Div con Flexbox

Come nella centratura orizzontale, Flexbox rende molto facile centrare gli oggetti verticalmente.

Per centrare un elemento verticalmente, applica display: flex e align-items: center all'elemento genitore:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  align-items: center;
}

Come Centrare Verticalmente e Orizzontalmente allo Stesso Tempo

Come Centrare Verticalmente e Orizzontalmente un Div in CSS con il Posizionamento Assoluto e i Margini Negativi

Questo è molto simile al metodo per centrare un elemento verticalmente descritto sopra. Come l'ultima volta, dovrai conoscere la larghezza e l'altezza dell'elemento che vuoi centrare.

Imposta la proprietà position dell'elemento genitore a relative.

Poi imposta le proprietà position dell'elemento figlio a absolute, top a 50%, e left e 50%. Questo centra semplicemente l'angolo in alto a sinistra dell'elemento figlio verticalmente e orizzontalmente.

Per centrare davvero l'elemento figlio, applica un margine superiore negativo impostato a metà dell'altezza dell'elemento figlio, ed un margine negativo sinistro impostato a metà della larghezza dell'elemento figlio:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Centra verticalmente e orizzontalmente */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* dai un margine top e left negativi per centrare davvero l'elemento */
}

Come Centrare Verticalmente e orizzontalmente un Div con Transform e Translate

Utilizza questo metodo per centrare verticalmente e orizzontalmente un elemento di cui non conosci le dimensioni esatte e non puoi usare Flexbox.

Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.

Dopodiché, imposta la proprietà position dell'elemento figlio a absolute, top a 50%, e left a 50%.

Infine, usa transform: translate(-50%, -50%) per centrare l'elemento figlio:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Come Centrare Verticalmente e Orizzontalmente un Div con Flexbox

Flexbox è il modo più semplice per centrare un elemento sia verticalmente che orizzontalmente.

Questo è semplicemente solo una combinazione dei due metodi Flexbox precedenti. Quindi applica justify-content: center e align-items: center per centrare l'elemento/i figli/o orizzontamente e verticalmente:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

Questo è tutto ciò che ti serve sapere per centrare al meglio. Ora va' e centra tutti gli oggetti.

Ci sono due modi principali per mostrare l'ora. Innanzitutto, c'è l'orologio a 12 ore che usa AM e PM, e poi c'è l'orologio a 24 ore.

La maggior parte dei paesi preferiscono l'orologio a 24 ore, ma l'orologio a 12 ore è molto diffuso in America Latina e nei paesi anglofoni. Nel metodo a 12 ore, sono le 12:00 due volte al giorno, a mezzanotte (AM) e mezzogiorno (PM).

La tabella qui sotto mostra la conversione tra il sistema a 12 ore e quello a 24 ore:

Orologio a 12 ore

La giornata è divisa in 12 periodi che vanno da mezzanotte a mezzogiorno (ore AM), e da mezzogiorno a mezzanotte (ore PM).

Le abbreviazioni AM e PM vengono dal Latino:

• AM: ante meridiem, prima di mezzogiorno
• PM: post meridiem, dopo mezzogiorno

Orologio a 24 ore

La giornata va da mezzanotte a mezzanotte ed è divisa in 24 ore da 0 (mezzanotte) a 23. L'ora è mostrata in ore e minuti trascorsi a partire dalla mezzanotte.

Convertire dall'orologio a 12 ore a quello a 24 ore

A partire dalla prima ora del giorno (12:00 AM o mezzanotte fino alle 12:59 AM) sottrarre 12 ore:

• 12:00 AM = 0:00
• 12:15 AM = 0:15

Dall'1:00 AM alle 12:59 PM, le ore e i minuti rimangono gli stessi:

• 9:00 AM = 9:00
• 12:59 PM = 12:59

Per le ore tra l'1:00 PM e le 11:59 PM, aggiungi 12 ore:

• 3:17 PM = 15:17
• 11:59 PM = 23:59.

Convertire dall'orologio a 24 ore a quello a 12 ore

A partire dalla prima ore del giorno (0:00 / mezzanotte fino alle 0:59), aggiungi 12 ore e AM all'ora:

• 0:30 = 12:30 AM
• 0:55 = 12:55 AM

Dall'1:00 alle 11:59, aggiungi semplicemente AM all'ora:

• 2:25 = 2:25 AM
• 9:30 = 9:30 AM

Per le ore tra le 12:00 e le 12:59, aggiungi semplicemente PM all'ora:

• 12:15 = 12:15 PM
• 12:48 = 12:48 PM

Per le ore tra le 13:00 e le 23:59, sottrai 12 ore e aggiungi PM all'ora:

• 16:55 = 4:55 PM
• 21:45 = 8:45 PM