Najbolje HTML, CSS, Javascript praksa: Chrome proširenje

Za ljude koji su upravo završili Codecademy.

Kada proučavate programiranje, najučinkovitiji način samo-učenja je razvoj proizvoda. Ovaj je pristup mnogo brži od pohađanja bilo kojeg tečaja programiranja za poboljšanje vaših programerskih vještina.

Međutim, ljudi obično počinju učiti programiranje s HTML-om, CSS-om i osnovnim Javascript-om u web programiranju, međutim, prije nego što dođu do dijela poslužitelja, teško je napraviti smislenu aplikaciju.

Dakle, uvijek sam pokušavao uvjeriti učenike kao što je ovaj,

Bit će zabavno ako počnete učiti na strani poslužitelja i pokrenete neku aplikaciju. Molim te, ne odustaj.

ali mnogi studenti prestaju učiti programiranje dok su u fazi HTML i CSS.

(Možda započinjanje HTML-om nije dobra ideja kako bi se potaknuli ljudi da studiraju programiranje.)

Jednog dana otvorio sam svoj preglednik Chrome kako bih započeo s radom. Tada sam shvatio da zapravo koristim najbolju aplikaciju koju možete graditi koristeći samo HTML, CSS i Javascript.

moment

Ukratko, ako ovo proširenje instalirate na Chrome, svaki put kada otvorite novu karticu pojavit će se čestitka za super cool sliku. Broj preuzimanja već je nekoliko milijuna. Ako to niste koristili, toplo vam preporučujem da ga instalirate. Možda ćete doživjeti ovu aplikaciju samo 2 do 3 sekunde po novoj kartici, ali možete se opustiti za taj mali trenutak.

Pokušajmo klonirati ovu aplikaciju!

Faza 1: Stvari koje treba pripremiti

  • HTML
  • CSS
  • Javascript
  • Lijepa slika: od neplaska
  • manifest.json (za učitavanje iz Chromea)

Način na koji sam brzo razvio aplikaciju bio je fokusiranjem na sadašnjost, a ne na budućnost. Naravno, važno je imati konkretan plan koji nije vaš solo projekt. Ali! Život samo-motivacije je vrlo kratak, pa kad se osjećate kao da razvijate nešto, bolje je da to brzo dovršite. Ako počnete razmišljati o drugim opcijama koje će poboljšati vaš proizvod, nikada nećete završiti svoj projekt.

Neka bude jednostavno.

Izrađujemo jednu web stranicu s jednom velikom slikom, jednom velikom pozdravnom porukom i možda trenutnim vremenom.

Pronađite sliku

Ako prijeđete na web stranicu Unsplash, možete pronaći mnoštvo cool slika bez licenci.

Budući da sam u Norveškoj, odlučio sam upotrijebiti ovu sliku.
Hvala, Vidar Nordli-Mathisen. (Uvijek je važno priznati njihov talent.)

Fotografiju Vidar Nordli-Mathisen na Unsplash-u

Napravite projekt

Jednostavno Jednostavno Jednostavno

Jedna HTML datoteka, jedan CSS, jedan Javascript i jedna datoteka manifesta.

To je sve što nam treba.

Ok, ovo je prva verzija.

Ovo je jednostavna web stranica. Sada, da biste se učitali s Chromea, morate dodati sljedeću datoteku manifest.json.

"Chrome_url_overrides" je najvažnije svojstvo u ovoj aplikaciji.

Idite na stranicu proširenjaKliknite gumb Kliknite gumb za odabir unutar mape projektaNaše skromno proširenje ...Svaki put kada otvorite novu karticu, prikazat će se vaša jednostavna web stranica.

Upravo smo završili svoj prvi projekt.

Možete ga koristiti samo s ovom funkcionalnošću. Možda možete urediti tekst s nečim čime se želite motivirati, poput "nemoguće je ništa", "samo učinite", "mi smo svijet", nešto-nešto. Ili možda umjesto toga možete staviti svoju obiteljsku fotografiju.

Ali neka je bolje od ovoga.

Faza 2: Stvari koje treba dodati

  • Trenutno vrijeme
  • Funkcija mijenjanja imena
  • Funkcija promjene slike

Kako bih uključio te tri nove značajke, promijenio sam HTML datoteku kao niže.

Treba promijeniti i CSS.

Tada će nova stranica biti kao ispod.

Oh, mislio sam da je to trenutak :)

Ažuriranje manifesta.json

Sada ćemo dodati dvije značajke.

Prije svega, ovoj ćemo aplikaciji dodati obrazac za unos kako bi ljudi mogli unijeti svoje ime. Ovaj ćemo obrazac dodati pod "Zdravo, Jungwon Seo".

Ovo je ružno, ispravimo to

Novi stil za ulaznu oznaku.

Ok, puno bolje.

Od sada trebamo razmišljati o tome kako pohraniti ove podatke.

Upotrijebit ćemo „kolačić“, ali ne možete koristiti „kolačić“ ako samo otvorite HTML datoteku iz preglednika Chrome. Pokušajte testirati nakon učitavanja kao proširenje za Chrome.

U prethodnom postu bili su netočni podaci o dozvoli pohrane. Ne treba vam dopuštenje za pohranu da biste upotrebljavali kolačić.

Također, budući da i dalje radim jQuery, dodajmo ga.

Pokušao sam dodati jQuery CDN, ali ...

Ne brinite, samo trebamo dodati još jedan entitet u manifest.json.

Dobro, sad smo spremni za kodiranje u datoteku script.js.

Ono što prvo moram učiniti je:

  1. Neka korisnici upišu svoje ime.
  2. Spremite u Cookie (uzmimo samo najpopularniji kod)
  3. Izblijedite obrazac za unos i blijedi u pozdravnoj poruci.

Ovo je prvi put da moramo razmišljati poput pravog programera.

1. slučaj: Kad ga otvorite prvi put.
Slučaj 2: Kada ga otvorite nakon što upišete svoje ime.

Trebamo odlučiti što bi trebalo biti vidljivo, a što ne bi trebalo biti.

Slučaj 1:
Vrijeme: Trenutno vrijeme
Pozdravna poruka: Kako se zoveš?
Obrazac za unos: Vidljivo

Slučaj 2:
Vrijeme: Trenutno vrijeme
Pozdravna poruka: Pozdrav, ime!
Obrazac za unos: Nevidljivo

A način razlikovanja ova dva slučaja jest provjera ima li kolačić ključ 'korisničko ime'.

S funkcijom ažuriranja vremena, novi script.js bit će dolje naveden.

Prije upisivanja imenaNakon upisivanja imena

Ok, čini se da djeluje.

Naravno, postoje neke stvari koje još uvijek trebamo poboljšati, poput efekata prijelaza.

Ali, dat ću vam ga.

Što još?

Moramo dodati funkciju koja korisnicima omogućuje promjenu slike.

Unsplash API

Jednostavno možete registrirati aplikaciju i dobiti žeton s ove stranice.

Da biste koristili Unsplash API, morate registrirati aplikaciju na njihovoj stranici za razvojne programere.

Klikom na 'Nova aplikacija' možete registrirati svoju.

Za demo proizvod moći ćete koristiti do 50 zahtjeva na sat. I to nam je dovoljno

Samo ispunite donji obrazac koliko želite.

Upišite bilo koje ime

Ako napravite aplikaciju, vidjet ćete dio "Ključevi" s preusmjerenog web mjesta.

Izbrisao sam ovu aplikaciju, pa nema smisla pokušavati.

Jednostavno morate kopirati "pristupni ključ" i dodijeliti vam javascript varijablu "ACCESS_KEY".

Koristit ćemo API za pretraživanje.

Evo scenarija Svi ljudi imaju različite interese. Želim prvo pitati njihovo zanimanje, a zatim ću pretražiti tu sliku pomoću Unsplash API-ja. Nakon toga nastavit ću ažurirati sliku svakih 12 sati (ista ključna riječ, drugačija slika).

Dakle, AJAX funkcija će biti kao u nastavku.

A ova će se funkcija nazvati nakon što ukucate interes.

Zatim, kao što možete očekivati, moramo ponovno postati programer.

Slučaj 1–1: Vrlo prvi put
Slučaj 1–2: Nakon naziva
Slučaj 2: Nakon što otkucate svoj interes
Slučaj 3: 12 sati kasnije.

U redu, odlučimo jedan po jedan.

U slučaju 1–1, trebamo samo sakriti sav dio slike. Preskočite ovo.

U slučaju 1-2 samo prikazuje obrazac za unos kamata.

U slučaju 2, nazovite AJAX i spremite podatke o slici.

U slučaju 3, samo postavimo vrijeme isteka na 12 sati, a ako je kolačić prazan, ponovno nazovite AJAX zahtjev.

Ključna riječ: London

Da, djeluje

Faza 3: Posljednji dodiri

Nije obvezno kreditirati fotografa, ali zašto ne?

Možemo napisati još par redaka koda i upisati ime i stranicu fotografa u gornji lijevi dio.

Kako bismo mogli upotrijebiti podatke fotografa kada prvi put provjerite kolačić.

Još jedna stvar, što ako netko želi promijeniti svoje zanimanje?

Dodajmo tu funkcionalnost koja omogućuje ljudima da ponovno upisuju interes.

Prije nego što kliknete gumb

Izvoli. Ako kliknete gumb "Odaberite novi interes", pokrenut će se otvoriti obrazac za unos u koji ste prethodno upisali interes.

Nakon što kliknete gumb

Faza 4: Napravite vlastiti proizvod.

Samo želim da iskusite proces od početka do kraja. Ipak to morate razviti sami kako biste zaista upili vještinu koju ste naučili.

Morate postojati neke funkcije za koje mislite da bi bilo dobro uključiti poput načina za odabir slučajne slike. Ili možda mislite da su neki od mojih kodova neučinkoviti. Možete poboljšati verziju istog proizvoda s boljim kodom.

Sretno i ne odustajte!

Kompletnu verziju možete pronaći ovdje: https://github.com/thejungwon/MyChromeExtension

Ova priča objavljena je u časopisu Noteworthy, gdje svakodnevno dolazi 10 000+ čitatelja kako bi upoznali ljude i ideje koji oblikuju proizvode koje volimo.

Pratite našu publikaciju da biste vidjeli više proizvoda o proizvodu i dizajnu koje je objavio časopis Journal.