- Spiega come le app web caricano i dati sul cloud storage.
- Distinguere tra archiviazione di file nel cloud e archiviazione di database nel cloud
- Scopri cos'è Supabase e come configurare il tuo spazio di archiviazione cloud
- Un progetto Supabase con un database per salvare i commenti degli utenti
- Kit di strumenti aggiornato per i fondatori dove i feedback degli stakeholder sono salvati nel database Supabase, con la possibilità di aggiungere/modificare/cancellare i record
- Gli studenti hanno già fatto le unità tecniche precedenti usando il Founder's Toolkit.
Dall'archiviazione locale all'archiviazione cloud
Il tuo kit di strumenti per fondatori è cresciuto con ogni unità. Hai creato moduli per raccogliere feedback, monitorare gli stakeholder e fare analisi basate sull'intelligenza artificiale. Questi strumenti ti aiutano a sviluppare la tua idea di business e, allo stesso tempo, a capire come adattarti alla tua idea.
Tutti i tuoi dati sono attualmente salvati nella memoria locale.
Ma c'è un limite che diventa un problema appena provi a lavorare con altre persone o a usare la tua app fuori dal tuo spazio di codice GitHub.
Le app di successo che servono gli utenti reali hanno bisogno di dati che:
I dati rimangono
Gli utenti possono fidarsi di te per le loro informazioni
Funziona su tutti i dispositivi
La gente cambia spesso browser, computer, telefoni e così via.
Permette di lavorare insieme
I team aziendali e di sviluppo come il tuo devono scambiarsi le informazioni.
Può crescere e scalare
Quello che va bene per un utente deve andare bene anche per mille.
Questa unità è il tuo primo passo nel mondo del cloud storage. Aggiornerai il tuo Founder's Toolkit in modo che i dati salvati nel localStorage siano ora al sicuro nel cloud e accessibili da qualsiasi luogo. Ma soprattutto, imparerai modelli applicabili ad altre situazioni per l'archiviazione dei dati nel cloud.
Archiviazione in cloud
Il cloud storage può essere visto in due modi principali, e capire la differenza ti aiuta a scegliere quello giusto per i diversi tipi di dati.
- L'archiviazione dei file è perfetta per quelli che gli utenti caricano o scaricano. Tutti i fogli di lavoro dei tuoi progetti sono esempi perfetti perché sono documenti che vuoi conservare e recuperare per poter collaborare con gli altri da qualsiasi luogo. Probabilmente adesso stai usando Google Drive per archiviare i file.
- L'archiviazione in database serve quando hai informazioni organizzate, tipo i dati dei tuoi stakeholder con nomi, tipi e campi di feedback.
Per ora, ci concentreremo sull'archiviazione dei database.
Scegliere un servizio di archiviazione cloud
Ci sono un sacco di opzioni di archiviazione cloud. Ecco come confrontare quelle più popolari per chi sta iniziando a costruire il proprio MVP.
Servizio
Complessità di configurazione
Livello gratuito
Prezzi dopo il periodo gratuito
Ideale per
Supabase
Semplice
- 500 MB di spazio per il database
- 1 GB di spazio per i file
- Limiti API generosi
- Richieste API illimitate*
25 $ al mese
- Startup che creano MVP
- Imparare SQL
- App che richiedono autenticazione + database
Firebase
Semplice
- 1 GB di spazio per i file
- 1 GB di spazio per il database
- Limiti API generosi
- Sincronizzazione in tempo reale inclusa
Pagamento in base al consumo (0,18 $/GB di spazio di archiviazione, 0,06 $/GB di download)
- Ecosistema Google
- App in tempo reale
- App mobili
- Principianti (più facile di SQL)
MongoDB Atlas
Medio
- 512 MB di spazio per il database
- Cluster condiviso
- Connessioni limitate
9 $ al mese (cluster dedicato)
- Database NoSQL
- Schemi di dati flessibili
- Archiviazione basata su documenti
- Scalare grandi set di dati
Amazon Web Services/ Piattaforma Google Cloud
Complesso
- Limitato (dipende dal servizio)
- Prove gratuite di 12 mesi disponibili
- Spesso serve una carta di credito
Variabile (dipende molto da come la usi)
- Applicazioni aziendali
- Bisogno di un controllo completo dell'infrastruttura
- Requisiti di scalabilità avanzati
- Squadre con esperienza in DevOps
Per questa lezione useremo lo storage Supabase .
Perché Supabase?
- Non serve fare configurazioni complicate o avere una carta di credito
- Un piano gratuito super generoso che funziona davvero per gli MVP. Alcuni "livelli gratuiti" sono così limitati che sono praticamente solo delle versioni di prova. A partire dal 22 gennaio 2026, Supabase ti dà 1 GB di spazio di archiviazione e richieste API illimitate al mese gratis. È abbastanza per creare, testare e persino lanciare in anteprima il tuo MVP senza preoccuparti di bollette a sorpresa. Man mano che la tua startup cresce, Supabase offre opzioni che si adattano alle tue esigenze.
- Una piattaforma unica per tutto il tuo storage backend
- Supabase non è solo per gli MVP. Oggi, aziende con milioni di utenti usano Supabase, quindi le competenze acquisite qui saranno direttamente trasferibili anche altrove.
Dovrai creare un account Supabase e un progetto e ottenere una chiave API, proprio come per Google AI Studio e Hugging Face. Il concetto è lo stesso: stai configurando l'accesso a un servizio esterno con cui la tua app comunicherà.
La differenza è che Supabase diventerà una parte più centrale della tua infrastruttura. Mentre Gemini si occupa di un compito specifico, cioè l'analisi aII, Supabase può gestire l'archiviazione, il database e potenzialmente l'autenticazione degli utenti. In pratica, getta le basi per la tua app.
Sicurezza
Quando crei e usi un cloud storage, è importante pensare alla sicurezza . Supabase ti permette di impostare diversi livelli di sicurezza per i vari ruoli nella tua app. Come prima cosa, attivando RLS (Row Level Security) è come chiudere a chiave la porta d'ingresso. Senza di essa, il database è come un libro aperto. Una volta chiuso a chiave, dobbiamo creare delle "chiavi digitali" specifiche per i diversi gruppi. Per il nostro Founder's Toolkit, vogliamo consentire agli stakeholder di inserire direttamente i propri feedback. Ma non vogliamo dare loro (e a chiunque apra la nostra app) la possibilità di visualizzare, modificare o eliminare i record nel database. Tuttavia, abbiamo bisogno che i membri del team abbiano pieno accesso. Quindi, imposteremo 2 livelli di autorizzazioni per il nostro database.
Stiamo mettendo in atto due ruoli diversi:
- Parti interessate (anonime): Accesso pubblico a inserire documenti. Possono dare il loro contributo, ma non possono cambiare la storia.
- Il Team (autenticato): Accesso sicuro tramite e-mail e password. Questo livello "Amministratore" ti dà il pieno controllo su creare, leggere, aggiornare ed eliminare (CRUD) i record per tenere tutto in ordine.
ATTIVITÀ 1
Crea il tuo account Supabase e il tuo progetto
Tempo stimato: 15 minuti
Creerai un account Supabase e un progetto, configurerai la tua tabella Stakeholders e otterrai una chiave API per accedere alla tabella dalla tua app.
1. Crea il tuo account Supabase
- Vai su supabase.com per creare un account.
- Clicca per registrarti. Ti consigliamo di registrarti con il tuo account GitHub per tenere tutto in ordine.
2. Crea un nuovo progetto
- Dopo esserti registrato, clicca per creare un Nuovo Progetto.
- Inserisci il nome del tuo progetto.
- Crea una password sicura o clicca su "genera una password" per crearne una automaticamente.
- Metti questa password al sicuro perché ti servirà per accedere direttamente al database.
- Scegli la tua organizzazione (la versione gratis potrebbe permettere solo una organizzazione e ti mostrerà un'organizzazione predefinita).
- Scegli la regione più vicina a te e ai tuoi utenti. Questo influisce sulle prestazioni, perché i dati memorizzati più vicino a loro si caricheranno più velocemente.
- In Opzioni di sicurezza:
- Tieni l'impostazione di default "API dati + stringa di connessione" perché ti dà più flessibilità e semplicità quando usi la loro API o ti connetti direttamente al database.
- Lascia l'impostazione di default "Usa schema pubblico per API dati". È una configurazione standard che va bene per la maggior parte delle app. L'opzione "schema API dedicato" serve per esigenze di sicurezza avanzate che al momento non ti servono.
- Clicca per creare un nuovo progetto e aspetta che finisca (1-2 minuti)
3. Crea una tabella nel database
Creeremo una tabella nel nostro database per i feedback dei nostri stakeholder.
- Sotto "Crea il tuo database", clicca sul pulsante " Editor tabella ".
- Clicca su Crea una tabella.
- Chiama la tabella " Stakeholder" e aggiungi una descrizione.
- Supabase crea la tabella con un ID e un timestamp, chiamato created_at. Tieni queste colonne perché è utile avere un ID per ogni riga della tabella e potrebbe essere utile sapere quando quelle righe vengono aggiunte alla tabella.
- Cos'altro dobbiamo aggiungere? Dai un'occhiata alla scheda Stakeholder Tracker nel tuo Founder's Toolkit. Il modulo include nome, tipo e feedback chiave. Aggiungi queste 3 colonne e imposta il tipo su testo.
- Clicca per salvare la tabella.
4. Configurare la politica di sicurezza per l'accesso al database
- Nell'Editor tabelle, clicca sui 3 puntini vicino alla tabella Stakeholder e poi su Visualizza politiche.
- RLS dovrebbe essere attivato. Se non lo è, attiva RLS (Row Level Security). Questo ti permette di decidere esattamente chi può accedere alle tabelle nel tuo database e nella tua app.
- Clicca su Crea politica per impostare una politica RLS per il tuo team.
- Nella finestra successiva,
- Digita " Accesso al team " per il nome della politica.
- Scegli TUTTO per il comando Politica.
- Per i ruoli di destinazione, nel menu a tendina, scegli autenticato.
- Dopo averlo usato, digita true.
- Dopo aver controllato, scrivi vero.
- Clicca su Salva politica.
Questo dà agli utenti registrati (il team) la possibilità di leggere, scrivere e cancellare tutto quello che vogliono nella tabella.
- Aggiungi un’altra politica (clicca di nuovo su“Crea politica” ), questa volta per gli stakeholder.
Questo permetterà agli stakeholder di inviare direttamente i loro commenti tramite l’app. Questa volta: - Inserisci " Accesso delle parti interessate " come nome della politica.
- Scegli INSERISCI per il comando Politica.
- Per i ruoli di destinazione, nel menu a tendina, scegli anonimo.
- Dopo averlo usato, digita true
- Dopo aver controllato, scrivi vero.
- Clicca su Salva politica.
5. Aggiungi utenti
Ora devi aggiungere utenti autenticati al tuo database. Potrebbe trattarsi dell'intero team, ma per ora aggiungi solo te stesso come utente, in modo da poter eseguire e testare l'app.
- Sul lato sinistro dello schermo, sotto Autenticazione, clicca su Utenti.
- Clicca su Aggiungi utente.
- Digita il tuo indirizzo e-mail, una password che ti ricorderai (o che salverai da qualche parte), lascia selezionata l'opzione Conferma automatica e clicca su Crea utente.
Al momento, il nostro Founder's Toolkit tiene tutto in un archivio locale. Potremmo ricominciare da zero con il nostro database Supabase, ma visto che abbiamo già un sacco di feedback importanti dagli stakeholder dalle versioni precedenti del Toolkit, spostiamo i dati che abbiamo già nella nostra tabella Stakeholders su Supabase. Potremmo farlo a mano, copiando e incollando, e potremmo anche chiedere a un LLM di farlo per noi.
Ma, visto che i nostri dati sono in JSON, possiamo usare l'editor SQL su Supabase per inserire i record nella tabella, usando SQL. SQL, o Structured Query Language, è un linguaggio specifico usato per gestire i dati, soprattutto in un sistema di gestione di database relazionali.
ATTIVITÀ 2
Sposta LocalStorage su Cloud Storage
Tempo stimato: 15 minuti
Estrai le informazioni sui tuoi stakeholder dalla memoria locale del browser e poi le importi nella tua tabella Supabase.
1. Prendi il JSON da LocalStorage
- Torna al tuo Codespace e avvia il tuo Founder's Toolkit.
- Apri gli Strumenti di sviluppo nel browser e clicca su Applicazione nella finestra degli strumenti di sviluppo per vedere il localStorage.
- Trova le informazioni sul feedback degli stakeholder nella memoria locale e fai clic con il pulsante destro del mouse sulla prima riga JSON. Si aprirà un menu a comparsa in cui potrai copiare il valore.
- Apri un editor di testo (TextEdit o Notepad) e incolla il JSON in un documento vuoto.
- Dai un'occhiata al file e nota che i nomi di ogni chiave sono in JSON, perché potrebbero essere un po' diversi dalle colonne nella tabella Supabase.
Ecco il nostro esempio JSON qui sotto
[
{
"name": "Jill Stein",
"type": "interview",
"feedback": "She is a teacher and knows many students this is a problem for. She thinks bringing in the parents and family to give them some education on the issue is helpful. Also bringing in the school admin to see how they can support. Also, many students do not have good internet access, especially in rural areas.",
"timestamp": "2026-01-14T03:47:10.531Z"
},
{
"name": "Phil Green",
"type": "email",
"feedback": "He is a student and has this issue. He does not have good internet access and he does not have transportation to get to a library either. He would need a way to get access during the school day or a means to access it otherwise. ",
"timestamp": "2026-01-14T03:48:13.193Z"
},
{
"name": "Billy Bob",
"type": "interview",
"feedback": "I absolutely love this idea. We need it!",
"timestamp": "2026-01-16T01:43:12.027Z"
},
{
"name": "Anna Banana",
"type": "email",
"feedback": "This is really a bad idea. I don't like it.",
"timestamp": "2026-01-16T01:46:33.361Z"
},
{
"name": "Millicent Penny",
"type": "interview",
"feedback": "I Love it! Best idea ever.",
"timestamp": "2026-01-16T01:50:46.785Z"
},
{
"name": "Fred Flintston",
"type": "interview",
"feedback": "This is probably the worst idea I have ever heard. Do not like it.",
"timestamp": "2026-01-16T01:52:06.319Z"
},
{
"name": "Betty White",
"type": "email",
"feedback": "Do not do it. It is a bad idea.",
"timestamp": "2026-01-16T01:53:19.377Z"
},
{
"name": "Mary Contrary",
"type": "email",
"feedback": "This is absolutely the most amazing idea I have ever heard. I absolutely love it.",
"sentiment": "positive",
"timestamp": "2026-01-16T02:05:42.541Z"
}
]
2. Trasferisci i dati su Supabase
- Apri il tuo progetto Supabase e, nel menu delle icone a sinistra, clicca su Editor SQL.
- Incolla il codice qui sotto nell'editor SQL.
INSERT INTO "Stakeholders" (name, type, feedback, created_at)
SELECT
value->>'name',
value->>'type',
value->>'feedback',
(value->>'timestamp')::timestamp
FROM json_array_elements('YOUR JSON HERE'::json) AS value;
- Guarda il codice per capire come funziona.
La prima riga INSERT INTO dice che vuoi inserire i dati nella tabella Stakeholders, in particolare in queste 4 colonne.
Modifica questa riga in modo che corrisponda ai nomi della tabella e delle colonne della tua tabella Supabase .. - La riga SELECT dice quali campi/chiavi vuoi prendere dal tuo JSON.
Modifica per cambiare uno qualsiasi dei campi elencati in modo che corrispondano esattamente le chiavi nel tuo JSON.- value->>'name' vuol dire "prendi il campo 'nome' dal JSON".
- ::timestamp vuol dire "trasforma la stringa in un formato timestamp".
- La riga FROM dice che l'array JSON è un insieme di righe che vuoi scorrere. Ogni record o riga si chiama valore. Incolla il tuo JSON tra le virgolette ' ' nella riga FROM.
- Clicca sul pulsante Esegui per lanciare il comando SQL.
- Se ti capita qualche errore, prova a vedere se riesci a risolvere il problema o chiedi aiuto a un LLM. Altrimenti, dovresti vedere un messaggio di conferma.
- Torna all'Editor tabelle. Dovresti vedere i tuoi record aggiunti alla tabella.
ATTIVITÀ 3
Aggiorna il Toolkit del fondatore per salvare sul cloud
Tempo stimato: 15 minuti
Ora aggiungerai la possibilità per gli stakeholder di inserire direttamente i loro feedback e l'accesso in lettura/scrittura/cancellazione al database degli stakeholder per i membri del team.
1. Apri il tuo repository GitHub e il tuo codespace
Visto che faremo un sacco di modifiche al codice, ti consigliamo di seguire tutto il flusso di lavoro Git delle unità precedenti.
- Vai su GitHub e apri il tuo repository Founder's Toolkit.
- Crea un nuovo ramo dal ramo principale e chiamalo supabase-cloud-storage
- Apri il tuo Codespace precedente e controlla il nuovo ramo lì.
- Aspetta che l'ambiente si carichi.
2. Aggiungi le credenziali al tuo file ".env"
Ti serviranno l'URL del tuo progetto Supabase e la chiave pubblicabile, che è tipo la tua API per il database.
- In Supabase, clicca sull'icona dell'ingranaggio in alto a sinistra per vedere le impostazioni del progetto.
- Clicca su API dati per trovare l'URL del progetto.
- Clicca su " API Keys " a sinistra e troverai la tua chiave pubblicabile.
- In Codespaces, apri il tuo file ".env" e aggiungi queste 2 righe:
SUPABASE_URL=IL_TUO_URL_DEL_PROGETTO_SUPABASE
SUPABASE_ANON_KEY=LA_TUO_CHIAVE_PUBBLICABILE_SUPABASE
- Copia/incolla il testo qui sopra e sostituiscilo con l'URL del tuo progetto e la chiave pubblicabile di Supabase.
3. Chiedi a Copilot di aggiungere la funzione di archiviazione Supabase
Lo faremo in pochi passaggi, perché ci sono un sacco di cose da fare, quindi aggiungere un po' alla volta aiuta a risolvere i problemi e a fare il debug.
Inizia con un messaggio tipo questo:
Aggiorna la scheda Stakeholder Tracker per fare quanto segue.
- Togli la tabella degli stakeholder e lascia solo il modulo.
- Invece di salvare le informazioni sul tuo dispositivo, ora le salverai su Supabase. Il nome della tabella è Stakeholders. Usa il ruolo anonimo.
- Il file .env ha già SUPABASE_URL e SUPABASE_ANON_KEY.
- Assicurati di aggiornare la Content Security Policy per far passare gli endpoint Supabase.
- L'inserimento per gli utenti anonimi dovrebbe non cercare di leggere i dati dopo l'inserimento, perché non ci riescono dato che hanno solo i permessi INSERT.
- Mostra un messaggio di conferma quando il record è stato aggiunto a Supabase.
4. Prova l'app
Segui tutte le istruzioni di installazione che Copilot ti dà per mettere i pacchetti.
- Apri l'app e prova ad aggiungere un nuovo stakeholder con qualche feedback. Dovresti ricevere un messaggio che ti dice che è andato tutto bene.
- Vai al tuo Table Editor su Supabase e controlla se la tabella si è aggiornata con il nuovo record. Potrebbe essere necessario aggiornare il browser per visualizzare il nuovo record.
- Risolvi i problemi con l'aiuto degli LLM per assicurarti che l'app funzioni bene.
5. Aggiungi login amministratore
- Chiedi a Copilot di aggiungere la possibilità di accedere come amministratore, in modo da poter visualizzare tutti i record degli stakeholder.
Ecco un esempio di prompt:
- Aggiungi il pulsante "Accesso amministratore" alla schermata Stakeholder Tracker.
- Mostra il modulo per l'email/password.
- Usa Supabase auth.signIn() per autenticare l'utente.
- Se hai fatto il login, mostra la tabella degli stakeholder sullo schermo, sotto il modulo.
- Mostra anche un pulsante di logout per chi ha fatto l'accesso.
- Se non sei connesso, mostra solo il modulo, non la tabella.
- Riavvia la tua app e accedi come amministratore usando l'indirizzo e-mail e la password che hai impostato in Supabase. Una volta effettuato l'accesso, dovresti vedere la tabella Stakeholder nella scheda Stakeholder Tracker.
- Esci. La tabella non dovrebbe comparire.
- Risolvi i problemi con l'aiuto degli LLM per assicurarti che l'app funzioni bene.
6. Aggiungi le funzioni Modifica ed Elimina
- Chiedi a Copilot di aggiungere le funzioni di modifica e cancellazione per gli amministratori che hanno effettuato l'accesso.
Ecco un esempio di prompt:
Solo per gli amministratori, aggiungi i pulsanti Modifica e Elimina per ogni riga della tabella degli stakeholder.
Questi pulsanti dovrebbero funzionare per modificare ed eliminare quelle righe nella tabella Supabase.
- Riavvia l'app. Prova ad aggiungere, modificare ed eliminare un record e controlla che la tabella in Supabase si aggiorni come deve.
- Esci e controlla se riesci ancora ad aggiungere un record, ma nient'altro.
- Risolvi i problemi con l'aiuto degli LLM per assicurarti che l'app funzioni bene.
7. Prova su più dispositivi
Oltre a garantire la sicurezza dei dati degli stakeholder, l'archiviazione dei dati nel cloud significa che gli utenti della tua app possono accedervi ovunque si trovino. Questo può aprire nuove possibilità, come la possibilità per gli stakeholder di aggiungere direttamente i propri feedback e per più membri del team di accedere ai dati dai propri telefoni.
Questo è il vero potere del cloud storage. Per provarlo mentre la tua app è ancora in fase di sviluppo in Codespaces, puoi fare così.
- Avvia la tua app in Codespaces digitando npm start.
- Trova la scheda Porte nel pannello in basso, vicino a Terminale.
- Dovresti vedere la tua porta attiva (ad esempio 3000).
- Fai clic con il pulsante destro del mouse sulla porta, vai su Visibilità porta e scegli Pubblica. La visibilità cambierà in Pubblica nella finestra.
- Fai di nuovo clic con il tasto destro sulla porta e poi clicca su Copia indirizzo locale. Questo è l'URL dell'app.
- Incolla l'URL da qualche parte dove puoi accedervi dal tuo telefono. Dovresti vedere la tua app in esecuzione lì. Prova ad aggiungere un nuovo stakeholder, ad accedere come amministratore, ecc.
- Dopo aver fatto tutti i test, assicurati di impostare di nuovo la visibilità della porta su Privata o semplicemente chiudi l'app. Altrimenti, l'app rimarrà aperta e non protetta.
8. Controlla che il file ENV venga ignorato.
Una volta che sei sicuro che il tuo Stakeholder Tracker funzioni per salvare, aggiornare e cancellare i record su Supabase e che funzioni su più di un dispositivo, è ora di fare il commit e il push.
Ma prima, apri il tuo file .gitignore e assicurati che ci sia il file .env perché, come hai imparato prima, questo evita che le tue credenziali Supabase finiscano su GitHub e le tiene al sicuro.
9. Salva e invia le modifiche su Github
- Quando sei contento e hai controllato che tutto funzioni, salva e invia le tue modifiche su Github, usando la funzione Controllo sorgente in Codespaces o digitando i comandi git in una finestra terminale.
- Vai su GitHub, unisci la richiesta pull e cancella il ramo.
Riflessione
Hai spostato i feedback degli stakeholder che erano salvati sul tuo computer sul cloud, dove ora sono disponibili per chi usa l'app. Il cloud storage è una cosa che si trova in quasi tutte le app, quindi è importante sapere come usarlo.
Termini chiave
- Archiviazione file su cloud: dove puoi mettere i tuoi file (come PDF, immagini, documenti) su server lontani a cui puoi accedere da qualsiasi dispositivo tramite Internet.
- Database cloud: dove si mettono i dati organizzati (come righe e colonne) su server lontani.
- Supabase: Una piattaforma che offre servizi di archiviazione, database e autenticazione con un generoso livello gratuito, pensata per startup e MVP.
- Persistenza:dati che rimangono salvati anche dopo aver chiuso il browser, riavviato il dispositivo o cambiato dispositivo.
Operazioni CRUD:le quattro funzioni di base dell'archiviazione dei dati:
- Crea – Aggiungi nuovi record (INSERISCI)
- Leggi – Prendi e mostra i dati (SELECT)
- Aggiornamento – Cambia i record già esistenti (UPDATE)
- Elimina – Togli i record (DELETE)
- SQL (Structured Query Language):linguaggio di programmazione che si usa per gestire e interrogare i database relazionali.
- Row Level Security (RLS) – Funzione di sicurezza che controlla quali utenti possono accedere a quali righe in una tabella di database.
Risorse aggiuntive
- Documentazione Javascript Supabase – Guida ufficiale all'integrazione di Supabase usando Javascript
- Tutorial SQL di W3Schools
