Best HTML, CSS, Javascript Practice: Chrome Extension

Per le persone che hanno appena finito Codecademy.

Quando studi la programmazione, il modo più efficace per studiare da solo è sviluppare un prodotto. Questo approccio è molto più veloce rispetto a qualsiasi corso di programmazione per migliorare le tue capacità di programmazione.

Normalmente, le persone iniziano a imparare la programmazione con HTML, CSS e Javascript di base nella programmazione web, tuttavia, prima di raggiungere la parte lato server è difficile creare un'applicazione significativa.

Quindi, ho sempre cercato di convincere gli studenti in questo modo,

Sarà divertente se inizi a imparare sul lato server e avvii un'applicazione. Per favore, non mollare.

ma molti studenti smettono di imparare a programmare mentre sono in fase HTML e CSS.

(Forse, iniziare con HTML non è una buona idea per incoraggiare le persone a studiare la programmazione.)

Un giorno ho aperto il mio browser Chrome per iniziare a lavorare. Poi mi sono reso conto che avevo effettivamente utilizzato la migliore applicazione che puoi creare usando solo HTML, CSS e Javascript.

Quantità di moto

Per essere brevi, se installi questa estensione su Chrome, ogni volta che apri una nuova scheda ci sarà un messaggio di saluto sopra un'immagine super cool. Il numero di download è già diversi milioni. Se non lo hai usato, ti consiglio vivamente di installarlo. Forse proverai questa applicazione solo per 2-3 secondi per ogni nuova scheda, ma puoi rilassarti per quel piccolo momento.

Proviamo a clonare questa applicazione!

Fase 1: cose da preparare

  • HTML
  • CSS
  • Javascript
  • Bella foto: da unsplash
  • manifest.json (da caricare da Chrome)

Il modo in cui ho sviluppato l'applicazione rapidamente è stato focalizzandomi sul presente, non sul futuro. Certo, è importante avere un piano concreto quando non è il tuo progetto solista. Ma! La durata della motivazione personale è molto breve, quindi quando hai voglia di sviluppare qualcosa, è meglio finirla molto rapidamente. Se inizi a pensare ad altre opzioni che miglioreranno il tuo prodotto, non finirai mai il tuo progetto.

Manteniamolo semplice.

Stiamo realizzando un sito Web con una grande immagine, un grande messaggio di saluto e forse l'ora corrente.

Trova una foto

Se vai sul sito Web di Unsplash puoi trovare tonnellate di fantastiche immagini senza licenza.

Da quando sono in Norvegia, ho deciso di utilizzare questa immagine.
Grazie, Vidar Nordli-Mathisen. (È sempre importante riconoscere il loro talento.)

Foto di Vidar Nordli-Mathisen su Unsplash

Crea un progetto

Semplice Semplice Semplice

Un file HTML, un CSS, un Javascript e un file manifest.

Questo è tutto ciò di cui abbiamo bisogno.

Ok, questa è la prima versione.

Questa è una semplice pagina web. Ora, per essere caricato da Chrome, devi aggiungere il seguente file manifest.json.

"Chrome_url_overrides" è la proprietà più importante in questa applicazione.

Vai alla pagina delle estensioniFai clic sul pulsante Fare clic sul pulsante Seleziona all'interno della cartella del progettoLa nostra modesta estensione ...Ogni volta che apri la nuova scheda, mostrerà la tua semplice pagina web.

Ecco fatto, abbiamo appena finito il nostro primo progetto.

Puoi usarlo solo con questa funzionalità. Forse puoi modificare il testo in qualcosa con cui vuoi motivarti, come "impossibile non è niente", "fallo e basta", "noi siamo il mondo", qualcosa-qualcosa. O forse puoi mettere la tua foto di famiglia invece.

Ma rendiamolo migliore di così.

Fase 2: cose da aggiungere

  • Ora attuale
  • Funzione di modifica del nome
  • Funzione di modifica delle immagini

Per includere queste tre nuove funzionalità, ho modificato il file HTML come di seguito.

Anche i CSS dovrebbero essere cambiati.

Quindi la nuova pagina sarà come sotto.

Oh, ho pensato che fosse Momentum :)

Aggiornamento manifest.json

Ora aggiungeremo due funzioni.

Prima di tutto, aggiungeremo un modulo di input a questa applicazione in modo che le persone possano inserirvi il proprio nome. Aggiungeremo questo modulo sotto il messaggio "Hello, Jungwon Seo".

È brutto, ripariamolo

Nuovo stile per il tag di input.

Va bene, molto meglio.

D'ora in poi, dobbiamo pensare a come conservare queste informazioni.

Useremo "cookie", ma non puoi usare "cookie" se apri il file HTML dal browser Chrome. Prova a provare dopo il caricamento come estensione di Chrome.

Nel post precedente erano presenti informazioni errate sull'autorizzazione di archiviazione. Non è necessaria l'autorizzazione di "archiviazione" per utilizzare "Cookie".

Inoltre, poiché preferisco ancora usare jQuery, aggiungiamolo.

Ho provato ad aggiungere jQuery CDN, ma ...

Non preoccuparti, dobbiamo solo aggiungere un'altra proprietà in manifest.json.

Bene, ora siamo pronti per codificare nel file script.js.

Quello che voglio fare prima è:

  1. Fai digitare agli utenti il ​​loro nome.
  2. Memorizza in cookie (usiamo solo il codice più popolare)
  3. Dissolvenza del modulo di input e dissolvenza nel messaggio di saluto.

Ora, questa è la prima volta che dobbiamo pensare come un vero sviluppatore.

Caso 1: quando lo si apre per la prima volta.
Caso 2: quando lo apri dopo aver digitato il tuo nome.

Dobbiamo decidere cosa dovrebbe essere visibile e cosa non dovrebbe essere.

Caso 1:
Ora: ora corrente
Messaggio di saluto: come ti chiami?
Modulo di input: visibile

Caso 2:
Ora: ora corrente
Messaggio di saluto: Ciao, !
Modulo di input: invisibile

E, il modo per differenziare questi due casi è verificare se il cookie ha la chiave "nome utente".

Con la funzione di aggiornamento temporale, il nuovo script.js sarà come di seguito.

Prima di digitare il nomeDopo aver digitato il nome

Ok, sembra funzionare.

Naturalmente, ci sono alcune cose che dobbiamo ancora migliorare, come gli effetti di transizione.

Ma te lo darò.

Ora cos'altro?

Dobbiamo aggiungere la funzionalità che consente agli utenti di modificare la propria immagine.

API Unsplash

Puoi facilmente registrare la tua app e ottenere un token da questa pagina.

Per utilizzare l'API Unsplash, devi registrare la tua applicazione nella loro pagina degli sviluppatori.

Facendo clic su

Per il prodotto demo, ti sarà consentito utilizzare fino a 50 richieste all'ora. E questo è abbastanza per noi.

Compila il modulo sottostante come preferisci.

Digita un nome qualsiasi

Se crei l'applicazione, vedrai la parte "Chiavi" dal sito Web reindirizzato.

Ho eliminato questa applicazione, quindi nessun punto da provare.

Devi solo copiare "Access Key" e assegnarlo nella variabile javascript "ACCESS_KEY".

Useremo l'API di ricerca.

Ecco lo scenario. Tutte le persone hanno interessi diversi. Quindi voglio prima chiedere il loro interesse e poi cercherò quell'immagine usando l'API Unsplash. Successivamente, continuerò ad aggiornare l'immagine ogni 12 ore (stessa parola chiave, immagine diversa).

Quindi la funzione AJAX sarà come sotto.

E questa funzione verrà chiamata dopo aver digitato il tuo interesse.

Quindi, come puoi aspettarti, dobbiamo essere di nuovo uno sviluppatore.

Caso 1–1: primissima volta
Caso 1–2: dopo il nome
Caso 2: dopo aver digitato il tuo interesse
Caso 3: 12 ore dopo.

Ok, decidiamo uno per uno.

Nel caso 1–1, dobbiamo solo nascondere tutta la parte relativa all'immagine. Salta questo.

Nel caso 1–2, mostra solo il modulo di input per l'interesse.

Nel caso 2, chiamare AJAX e salvare le informazioni sull'immagine.

Nel caso 3, impostiamo il tempo di scadenza su 12 ore e, se il cookie è vuoto, chiama nuovamente la richiesta AJAX.

Parola chiave: Londra

Sì, funziona.

Fase 3: tocchi finali

Non è obbligatorio dare credito al fotografo, ma perché no?

Possiamo scrivere un altro paio di righe di codice e accreditare il nome e la pagina del fotografo nella parte in alto a sinistra.

In modo che possiamo utilizzare le informazioni del fotografo quando controlli i cookie per la prima volta.

Ancora una cosa, cosa succede se qualcuno vuole cambiare il proprio interesse?

Aggiungiamo quella funzionalità che consente alle persone di riscrivere il proprio interesse.

Prima di fare clic sul pulsante

Ecco qua Se fai clic sul pulsante "Scegli un nuovo interesse", si aprirà il modulo di input in cui hai digitato il tuo interesse prima.

Dopo aver fatto clic sul pulsante

Fase 4: crea il tuo prodotto.

Voglio solo che tu sperimenti il ​​processo dall'inizio alla fine. Tuttavia, devi svilupparlo da solo per assorbire davvero l'abilità che hai imparato.

Ci devono essere alcune funzioni che ritieni possano essere utili includere come il modo di scegliere l'immagine casuale. Oppure potresti pensare che alcuni dei miei codici siano inefficienti. Puoi migliorare la tua versione dello stesso prodotto con un codice migliore.

Buona fortuna e non mollare!

La versione completa è disponibile qui: https://github.com/thejungwon/MyChromeExtension

Questa storia è pubblicata su Noteworthy, dove ogni giorno arrivano oltre 10.000 lettori per conoscere le persone e le idee che danno forma ai prodotti che amiamo.

Segui la nostra pubblicazione per vedere altre storie di prodotti e design presentate dal team Journal.