Cele mai bune practici HTML, CSS, Javascript: extensie Chrome

Pentru persoanele care tocmai au terminat Codecademy.

Când studiați programarea, cel mai eficient mod de auto-studiu este dezvoltarea unui produs. Această abordare este mult mai rapidă decât a lua orice curs de programare pentru a vă îmbunătăți abilitățile de programare.

În mod normal, oamenii încep să învețe programarea cu HTML, CSS și Javascript de bază în programarea web, cu toate acestea, înainte de a ajunge la partea serverului, este dificil să facă o aplicație semnificativă.

Deci, am încercat întotdeauna să îi conving pe studenți astfel,

Va fi distractiv dacă începeți să învățați din partea serverului și lansați o anumită aplicație. Vă rog, nu renunțați.

dar mulți studenți încetează să învețe programarea în timp ce se află în etapa HTML și CSS.

(Poate, a începe cu HTML nu este o idee bună pentru a încuraja oamenii să studieze programarea.)

Într-o zi, mi-am deschis browserul Chrome pentru a începe munca. Atunci mi-am dat seama că folosisem de fapt cea mai bună aplicație pe care o puteți construi folosind doar HTML, CSS și Javascript.

Impuls

Pentru a fi pe scurt, dacă instalați această extensie pe Chrome, de fiecare dată când deschideți o nouă filă, va apărea un mesaj de salut peste o imagine super cool. Numărul de descărcări este deja de câteva milioane. Dacă nu ați utilizat acest lucru, vă recomand să-l instalați. Poate că veți experimenta această aplicație doar 2 până la 3 secunde pe fiecare filă nouă, dar vă puteți relaxa pentru acel mic moment.

Să încercăm să clonăm această aplicație!

Faza 1: Lucruri de pregătit

  • HTML
  • CSS
  • Javascript
  • Poză frumoasă: de la unsplash
  • manifest.json (care va fi încărcat de pe Chrome)

Modul în care am dezvoltat rapid aplicația a fost concentrându-mă pe prezent, nu pe viitor. Desigur, este important să aveți un plan concret atunci când nu este proiectul dvs. individual. Dar! Durata de viață a auto-motivației este foarte scurtă, așa că atunci când simțiți că dezvolți ceva, mai bine îl termini foarte repede. Dacă începeți să vă gândiți la alte opțiuni care vă vor îmbunătăți produsul, nu vă veți termina niciodată proiectul.

Să-l păstrăm simplu.

Facem un singur site web cu o imagine mare, un singur mesaj de felicitare și poate ora actuală.

Găsiți o poză

Dacă accesați site-ul web Unsplash, puteți găsi tone de imagini frumoase, fără licență.

Întrucât sunt în Norvegia, am decis să folosesc această imagine.
Mulțumesc, Vidar Nordli-Mathisen. (Este întotdeauna important să le recunoaștem talentul.)

Foto de Vidar Nordli-Mathisen pe Unsplash

Faceți un proiect

Simplu Simplu Simplu

Un fișier HTML, un CSS, un Javascript și un fișier manifest.

Este tot ce avem nevoie.

Bine, aceasta este prima versiune.

Aceasta este o pagină web simplă. Acum, pentru a fi încărcat de pe Chrome, trebuie să adăugați următorul fișier manifest.json.

„Chrome_url_overrides” este cea mai importantă proprietate din această aplicație.

Accesați pagina extensieiFaceți clic pe butonul „Încărcați neambalat”Faceți clic pe butonul de selectare din folderul proiectuluiExtensia noastră umilă ...De fiecare dată când deschideți noua filă, aceasta vă va afișa pagina web simplă.

Acolo te duci, tocmai am terminat primul nostru proiect.

Puteți utiliza doar cu această funcționalitate. Poate că puteți edita textul cu ceva cu care doriți să vă motivați, cum ar fi „imposibil nu este nimic”, „faceți doar”, „suntem lumea”, ceva-ceva. Sau poate îți poți pune fotografia de familie.

Dar să o facem mai bună decât asta.

Faza 2: Lucruri de adăugat

  • Ora curentă
  • Funcția de schimbare a numelui
  • Funcția de schimbare a imaginii

Pentru a include aceste trei funcții noi, am schimbat fișierul HTML ca mai jos.

CSS ar trebui schimbat și el.

Atunci noua pagină va fi ca mai jos.

Oh, am crezut că este Momentum :)

Actualizarea manifest.json

Acum, vom adăuga două funcții.

În primul rând, vom adăuga un formular de intrare la această aplicație pentru ca oamenii să își poată pune numele. Vom adăuga acest formular sub mesajul „Hello, Jungwon Seo”.

Acest lucru este urât, să rezolvăm

Stil nou pentru eticheta de intrare.

Bine, mult mai bine.

De acum înainte, trebuie să ne gândim la modul de stocare a acestor informații.

Vom folosi „cookie”, dar nu puteți folosi „cookie” dacă deschideți doar fișierul HTML din browserul Chrome. Încercați să testați după încărcare ca extensie Chrome.

În postarea anterioară au existat informații incorecte despre permisiunea de stocare. Nu aveți nevoie de permisiunea „stocare” pentru a utiliza „Cookie”.

De asemenea, întrucât prefer încă să folosesc jQuery, să-l adăugăm.

Am încercat să adaug jQuery CDN, dar ...

Nu vă faceți griji, trebuie doar să adăugăm încă o proprietate în manifest.json.

Bine, acum suntem gata să codăm în fișierul script.js.

Ce vreau să fac mai întâi este:

  1. Faceți utilizatorii să-și scrie numele.
  2. Magazin în Cookie (să folosim doar cel mai popular cod)
  3. Estompează formularul de introducere și decolorează mesajul de salut.

Acum, este prima dată când trebuie să ne gândim ca un adevărat dezvoltator.

Cazul 1: Când îl deschizi pentru prima dată.
Cazul 2: Când îl deschideți după ce introduceți numele.

Trebuie să decidem ce ar trebui să fie vizibil și ce nu ar trebui să fie.

Cazul 1:
Ora: ora curentă
Mesaj de salut: Cum te numesti?
Forma de intrare: vizibilă

Cazul 2:
Ora: ora curentă
Mesaj de salut: Buna ziua, !
Forma de intrare: Invizibilă

Și, modul de a diferenția aceste două cazuri este de a verifica dacă cookie-ul are cheia „nume de utilizator”.

Cu funcția de actualizare a timpului, noile script.js vor fi ca mai jos.

Înainte de a tasta numeleDupă ce tastați numele

Bine, se pare că funcționează.

Desigur, există anumite lucruri pe care trebuie să le îmbunătățim, cum ar fi efectele de tranziție.

Dar, vă voi da.

Acum, ce altceva?

Trebuie să adăugăm funcționalitatea care permite utilizatorilor să își schimbe poza.

API-ul neplăcut

Puteți înregistra aplicația cu ușurință și puteți obține un jeton din această pagină.

Pentru a utiliza API-ul Unsplash, trebuie să înregistrați aplicația în pagina lor de dezvoltatori.

Făcând clic pe „Aplicație nouă”, vă puteți înregistra.

Pentru produsul demonstrativ, vi se va permite să utilizați până la 50 de solicitări pe oră. Și este suficient pentru noi.

Nu trebuie decât să completați formularul de mai jos, pe care doriți.

Introduceți orice nume

Dacă creați aplicația, veți vedea partea „Chei” de pe site-ul redirecționat.

Am șters această aplicație, deci nu are rost să încerc.

Trebuie doar să copiați „cheia de acces” și să le atribuiți în variabila javascript „ACCESS_KEY”.

Vom folosi API-ul de căutare.

Iată scenariul. Toți oamenii au interese diferite. Așa că vreau să le cer interesul mai întâi și apoi voi căuta acea imagine folosind API-ul Unsplash. După aceea, voi continua să actualizez imaginea la fiecare 12 ore (același cuvânt cheie, poză diferită).

Deci, funcția AJAX va fi ca mai jos.

Și această funcție va fi apelată după introducerea interesului.

Atunci, după cum vă așteptați, trebuie să fim din nou dezvoltator.

Cazul 1–1: Foarte prima dată
Cazul 1–2: După nume
Cazul 2: După ce tastați interesul
Cazul 3: 12 ore mai târziu.

Bine, să decidem unul câte unul.

În cazul 1–1, trebuie doar să ascundem toate părțile legate de imagine. Treci peste asta.

În cazul 1–2, este prezentat doar formularul de intrare pentru interes.

În cazul 2, apelați AJAX și salvați informațiile despre imagine.

În cazul 3, să stabilim doar timpul de expirare la 12 ore și dacă cookie-ul este gol, sunați din nou la solicitarea AJAX.

Cuvânt cheie: Londra

Da, funcționează.

Faza 3: atingeri finale

Nu este obligatoriu să acorde credite fotografului, dar de ce nu?

Putem scrie încă câteva linii de cod și să credim numele și pagina fotografului în partea stânga sus.

Pentru a putea folosi informațiile fotografului atunci când verificați cookie-ul pentru prima dată.

Încă un lucru, ce se întâmplă dacă cineva dorește să își schimbe interesul?

Să adăugăm acea funcționalitate care le permite oamenilor să își relectureze interesul.

Înainte de a face clic pe buton

Acolo te duci. Dacă faceți clic pe butonul „Alegeți un nou interes”, acesta va declanșa să deschideți formularul de introducere unde ați tastat interesul înainte.

După ce faceți clic pe buton

Faza 4: Realizați propriul dvs. produs.

Vreau doar să experimentați procesul de la început până la sfârșit. Totuși, trebuie să dezvolți acest lucru singur pentru a absorbi cu adevărat abilitatea pe care ai învățat-o.

Trebuie să existe anumite funcții pe care credeți că ar fi bine să le includeți, cum ar fi modul de alegere a imaginii aleatorii. Sau poate credeți că unele dintre codurile mele sunt ineficiente. Puteți îmbunătăți versiunea dvs. de același produs cu un cod mai bun.

Noroc și nu renunțați!

Versiunea completă poate fi găsită aici: https://github.com/thejungwon/MyChromeExtension

Această poveste este publicată în De remarcat, unde peste 10.000 de cititori vin în fiecare zi pentru a afla despre oamenii și ideile care conturează produsele pe care le iubim.

Urmați publicația noastră pentru a vedea mai multe povești despre produse și design prezentate de echipa Jurnalului.