Najboljši primeri HTML, CSS, Javascript: razširitev Chroma

Za ljudi, ki so pravkar končali Codecademy.

Ko študirate programiranje, je najučinkovitejši način samostojnega učenja razvoj izdelka. Ta pristop je veliko hitrejši kot uporaba katerega koli tečaja programiranja za izboljšanje vaših programerskih znanj.

Običajno se ljudje pri spletnem programiranju začnejo učiti programiranja s HTML, CSS in osnovnim Javascript, vendar preden pridejo do dela strežnika, je težko narediti smiselno aplikacijo.

Vedno sem tako poskušal prepričati študente,

Zabavno bo, če se začnete učiti na strani strežnika in zaženete kakšno aplikacijo. Prosim, ne obupajte.

vendar se veliko študentov neha učiti programiranja na stopnji HTML in CSS.

(Mogoče začeti z HTML ni dobra ideja, da bi spodbudili ljudi k študiju programiranja.)

Nekega dne sem odprl svoj brskalnik Chrome, da sem začel delovati. Nato sem ugotovil, da dejansko uporabljam najboljšo aplikacijo, ki jo lahko sestavite samo z uporabo HTML, CSS in Javascript.

Zagon

Če na kratko povem, če to razširitev namestite na Chrome, se bo vsakič, ko odprete nov zavihek, pojavilo voščilo nad super kul sliko. Število prenosov je že nekaj milijonov. Če tega še niste uporabili, toplo priporočam, da ga namestite. Morda boste to aplikacijo doživeli le 2 do 3 sekunde na novem zavihku, vendar se lahko sprostite za tisti majhen trenutek.

Poskusimo klonirati to aplikacijo!

1. faza: Pripraviti stvari

  • HTML
  • CSS
  • Javascript
  • Lepa slika: od nepoplavanja
  • manifest.json (za nalaganje iz Chroma)

Način, kako hitro sem razvil aplikacijo, je bil z osredotočanjem na sedanjost, ne na prihodnost. Seveda je pomembno imeti konkreten načrt, kadar to ni vaš solo projekt. Ampak! Življenjska doba samomotivacije je zelo kratka, zato, ko se vam zdi, da nekaj razvijate, je bolje, da ga zelo hitro končate. Če začnete razmišljati o drugih možnostih, ki bodo izboljšale vaš izdelek, ne boste nikoli končali svojega projekta.

Naj bo preprosto.

Izdelamo eno spletno mesto z eno veliko sliko, enim velikim pozdravnim sporočilom in morda trenutnim časom.

Poiščite sliko

Če greste na spletno mesto Unsplash, lahko najdete na tone odličnih slik brez licenc.

Ker sem na Norveškem, sem se odločil, da uporabim to sliko.
Hvala, Vidar Nordli-Mathisen. (Vedno je pomembno priznati njihov talent.)

Fotografijo Vidar Nordli-Mathisen na Unsplash

Naredite projekt

Enostavno preprosto

Ena datoteka HTML, en CSS, en Javascript in ena manifestna datoteka.

To je vse, kar potrebujemo.

Ok, to je prva različica.

To je preprosta spletna stran. Zdaj morate za nalaganje iz Chroma dodati naslednjo datoteko manifest.json.

"Chrome_url_overrides" je najpomembnejša lastnost v tej aplikaciji.

Pojdite na stran s podaljškomKliknite gumb »Naloži nepakirano«Kliknite gumb za izbiro znotraj mape projektaNaš skromni podaljšek ...Vsakič, ko odprete nov zavihek, se bo prikazala vaša preprosta spletna stran.

Pravkar smo končali svoj prvi projekt.

Lahko ga uporabljate samo s to funkcijo. Mogoče lahko besedilo uredite na nekaj, s čimer se želite motivirati, na primer "nemogoče ni nič", "samo naredi to", "mi smo svet", nekaj-nekaj. Lahko pa namesto tega postavite svojo družinsko fotografijo.

Vendar naj bo boljše od tega.

2. faza: Dodati je treba stvari

  • Trenutni čas
  • Funkcija spreminjanja imena
  • Funkcija spreminjanja slike

Za vključitev teh treh novih funkcij sem spremenil datoteko HTML, kot je spodaj.

Tudi CSS je treba spremeniti.

Potem bo nova stran kot spodaj.

Oh, mislil sem, da je to trenutek :)

Posodobitev manifest.json

Zdaj bomo dodali dve funkciji.

Najprej bomo tej aplikaciji dodali obrazec za vnos, da bodo ljudje lahko vnesli svoje ime. Ta obrazec bomo dodali pod sporočilom "Pozdravljeni, Jungwon Seo".

To je grdo, popravimo ga

Nov slog za vhodno oznako.

Ok, veliko bolje.

Od zdaj naprej moramo razmišljati o tem, kako shraniti te podatke.

Uporabili bomo "piškotek", vendar piškotka ne morete uporabiti, če datoteko HTML samo odprete iz brskalnika Chrome. Po nalaganju poskusite preizkusiti kot razširitev za Chrome.

V prejšnji objavi so bili napačni podatki o dovoljenju za shranjevanje. Za uporabo piškotka ne potrebujete dovoljenja za shranjevanje.

Ker pa še vedno raje uporabljam jQuery, ga dodajmo.

Poskušal sem dodati jQuery CDN, ampak…

Brez skrbi, v manifest.json moramo dodati še eno lastnost.

Dobro, zdaj smo pripravljeni kodirati v datoteko script.js.

Najprej želim narediti:

  1. Uporabniki naj vnesejo svoje ime.
  2. Shranite v piškotek (uporabimo samo najbolj priljubljeno kodo)
  3. Izbrisati vnosni obrazec in zbledeti v pozdravnem sporočilu.

Zdaj je to prvič, da moramo razmišljati kot pravi razvijalci.

1. primer: Ko ga prvič odprete.
2. primer: Ko ga odprete, potem ko vtipkate svoje ime.

Odločiti se moramo, kaj mora biti vidno in kaj ne bi smelo biti.

Primer 1:
Čas: Trenutni čas
Pozdravljeno sporočilo: Kako se vam reče?
Obrazec za vnos: Vidno

Primer 2:
Čas: Trenutni čas
Pozdravljeno sporočilo: Pozdravljeni, !
Oblika vnosa: Nevidno

Način za razlikovanje teh dveh primerov je preverjanje, ali piškotek vsebuje ključ uporabniško ime.

S funkcijo posodabljanja časa bo novi script.js podoben spodaj.

Preden vtipkate imePo vnosu imena

Ok, zdi se, da deluje.

Seveda pa moramo še izboljšati nekatere stvari, na primer učinke prehoda.

Ampak, dal vam ga bom.

Zdaj, kaj še?

Dodati moramo funkcijo, ki uporabnikom omogoča spreminjanje slike.

Unsplash API

Svojo aplikacijo lahko preprosto registrirate in dobite žeton s te strani.

Za uporabo Unsplash API-ja morate prijaviti svojo aplikacijo na njihovi strani za razvijalce.

S klikom na 'Nova aplikacija' lahko registrirate svojega.

Za predstavitveni izdelek boste lahko uporabljali do 50 zahtev na uro. In to nam je dovolj.

Samo izpolnite spodnji obrazec, kar želite.

Vnesite poljubno ime

Če ustvarite aplikacijo, boste na preusmerjenem spletnem mestu videli del "Ključi".

Izbrisal sem to aplikacijo, tako da ni smisla poskusiti.

Prekopirati morate le „Access Key“ in dodeliti v spremenljivko javascripta „ACCESS_KEY“.

Uporabili bomo API za iskanje.

Tukaj je scenarij. Vsi ljudje imajo različne interese. Najprej želim vprašati njihovo zanimanje in nato poiščem to sliko z uporabo Unsplash API-ja. Po tem bom sliko posodabljal vsakih 12 ur (ista ključna beseda, drugačna slika).

Torej bo funkcija AJAX kot spodaj.

In ta funkcija bo poklicana po vnosu zanimanja.

Potem moramo, kot lahko pričakujete, znova postati razvijalci.

Primer 1–1: prvič
Primer 1–2: za imenom
Primer 2: Po vnosu zanimanja
Primer 3: 12 ur kasneje.

Ok, odločimo se enega za drugim.

V primeru 1–1 moramo samo skriti ves del slike. To preskočite.

V primeru 1–2 samo prikaže obrazec za vnos obresti.

V primeru 2 pokličite AJAX in shranite podatke o sliki.

V 3. primeru nastavimo čas poteka na 12 ur, piškotek pa je prazen in pokličite ponovno AJAX.

Ključna beseda: London

Da, deluje.

3. faza: Zadnji dotiki

Kreditiranje fotografa ni obvezno, a zakaj ne?

Lahko napišemo še nekaj vrstic kode in pripišemo fotografovo ime in stran v zgornji levi strani.

Tako bomo lahko uporabili podatke fotografa, ko prvič preverite piškotek.

Še nekaj: kaj, če nekdo želi spremeniti svoje zanimanje?

Dodajmo tisto funkcionalnost, ki ljudem omogoča, da ponovno vnesejo svoje zanimanje.

Preden kliknete na gumb

Izvolite. Če kliknete gumb »Izberi novo zanimanje«, se bo sprožilo odpiranje obrazca, kjer ste predhodno vnesli svoje zanimanje.

Ko kliknete gumb

4. faza: naredite svoj izdelek.

Želim si, da bi izkusili postopek od začetka do konca. Kljub temu morate to razviti sami, da boste resnično absorbirali znanje, ki ste se ga naučili.

Obstajati mora nekaj funkcij, za katere menite, da bi bilo dobro vključiti take, kot je način izbire naključne slike. Lahko pa se vam zdi, da so nekatere moje kode neučinkovite. Svojo različico istega izdelka lahko izboljšate z boljšo kodo.

Vso srečo in ne obupajte!

Celotno različico najdete tukaj: https://github.com/thejungwon/MyChromeExtension

Ta zgodba je objavljena v časopisu Noteworthy, kamor vsak dan pride 10.000+ bralcev, da spoznajo ljudi in ideje, ki oblikujejo izdelke, ki jih imamo radi.

Sledite naši publikaciji, če želite videti več izdelkov in zgodb o oblikovanju, ki jih je predstavila ekipa revije.