Parim HTML, CSS, Javascripti tava: Chrome'i laiend

Inimestele, kes just lõpetanud Codecademy.

Programmeerimist õppides on kõige tõhusam viis iseõppimiseks toote väljatöötamine. See lähenemine on palju kiirem kui ükskõik millise programmeerimiskursuse läbimine programmeerimisoskuste parandamiseks.

Tavaliselt hakkavad inimesed veebiprogrammeerimises õppima HTML-i, CSS-i ja tavalise Javascripti programmeerimist, kuid enne serveripoolsesse ossa jõudmist on sisuka rakenduse loomine keeruline.

Proovisin õpilasi alati niimoodi veenda,

See on lõbus, kui hakkate õppima serveripoole ja käivitate mõne rakenduse. Palun ära anna alla.

kuid paljud õpilased lõpetavad HTML-i ja CSS-i ajal programmeerimise õppimise.

(Võib-olla pole HTML-iga alustamine hea mõte, et julgustada inimesi programmeerimist õppima.)

Ühel päeval avasin töö alustamiseks oma Chrome'i brauseri. Siis mõistsin, et olen tegelikult kasutanud parimat rakendust, mille saate ehitada, kasutades ainult HTML-i, CSS-i ja Javascripti.

Hoog

Lühidalt öeldes, kui installite selle laienduse Chrome'i, kuvatakse iga kord, kui avate uue vahekaardi, ülilaheda pildi peal tervitussõnumi. Allalaadimiste arv on juba mitu miljonit. Kui te pole seda kasutanud, soovitan teil see installida. Võib-olla kogete seda rakendust ainult 2–3 sekundit iga uue vahelehe kohta, kuid saate selle väikese hetke lõõgastuda.

Proovime selle rakenduse kloonida!

1. etapp: ettevalmistatavad asjad

  • HTML
  • CSS
  • Javascript
  • Kena pilt: alates unplashist
  • manifest.json (laaditakse Chrome'ist)

Rakenduse kiire arendamise viis oli keskenduda olevikule, mitte tulevikule. Muidugi on oluline omada konkreetset plaani, kui see pole teie sooloprojekt. Aga! Enesemotivatsiooni kestus on väga lühike, nii et kui tunnete, et arendate midagi, lõpetage see paremini kiiresti. Kui hakkate mõtlema muudele võimalustele, mis teie toodet paremaks muudavad, ei lõpe te kunagi oma projekti.

Hoidkem see lihtsana.

Valmistame ühe veebisaidi ühe suure pildi, ühe suure tervitussõnumi ja võib-olla praeguse ajaga.

Leidke pilt

Unsplashi veebisaidil võite leida palju lahedaid litsentsivabu pilte.

Kuna olen Norras, otsustasin seda pilti kasutada.
Tänud, Vidar Nordli-Mathisen. (Nende talentide tunnustamine on alati oluline.)

Foto autor Vidar Nordli-Mathisen saidil Unsplash

Tehke projekt

Lihtne Lihtne Lihtne

Üks HTML-fail, üks CSS, üks Javascript ja üks manifestifail.

See on kõik, mida vajame.

Olgu, see on esimene versioon.

See on lihtne veebileht. Nüüd peate Chrome'ist laadimiseks lisama järgmise faili manifest.json.

Selle rakenduse kõige olulisem omadus on „chrome_url_overrides”.

Minge laiendusleheleKlõpsake nuppu Laadi lahti pakkimataKlõpsake oma projekti kausta sees nuppu nuppuMeie alandlik pikendus…Iga kord, kui avate uue vahekaardi, kuvatakse sellel teie lihtne veebileht.

Seal, kus sa lähed, oleme just oma esimese projekti lõpetanud.

Saate seda kasutada ainult selle funktsionaalsusega. Võib-olla saate teksti muuta millekski, millega soovite ennast motiveerida, näiteks „võimatu pole midagi”, „tee lihtsalt ära”, „me oleme maailm”, midagi-midagi. Või äkki võite selle asemel panna oma perefoto.

Kuid teeme selle paremaks.

2. etapp: lisatavad asjad

  • Praegune aeg
  • Nime muutmise funktsioon
  • Pildi muutmise funktsioon

Nende kolme uue funktsiooni kaasamiseks muutsin HTML-faili nagu allpool.

CSS tuleks ka muuta.

Siis saab uus leht nagu allpool.

Oh, ma arvasin, et see on hetk :)

Manifesti.jsoni värskendamine

Nüüd lisame kaks funktsiooni.

Esiteks lisame sellele rakendusele sisestusvormi, et inimesed saaksid sellele oma nime panna. Lisame selle vormi sõnumi „Tere, Jungwon Seo” alla.

See on kole, parandame selle ära

Sisestussildi uus stiil.

Olgu, palju parem.

Nüüdsest peame mõtlema, kuidas seda teavet säilitada.

Kasutame küpsist, kuid te ei saa küpsist kasutada, kui avate HTML-faili lihtsalt Chrome'i brauserist. Proovige pärast Chrome'i laiendina laadimist testida.

Eelmises postituses oli salvestusloa kohta vale teave. Küpsise kasutamiseks pole teil vaja salvestusluba.

Kuna eelistan endiselt jQuery kasutamist, siis lisame selle.

Proovisin lisada jQuery CDN, kuid…

Ärge muretsege, peame lihtsalt lisama veel ühe atribuudi manifest.json.

Hea, nüüd oleme valmis faili script.js koodi kodeerima.

Kõigepealt tahan teha järgmist:

  1. Pange kasutajad oma nime kirjutama.
  2. Salvesta küpsisesse (kasutagem ainult kõige populaarsemat koodi)
  3. Paigutage sisestusvorm välja ja kaduge tervitussõnumis.

Nüüd on see esimene kord, kui peame mõtlema nagu tõeline arendaja.

1. juhtum: kui avate selle esmakordselt.
2. juhtum: kui avate selle pärast oma nime sisestamist.

Peame otsustama, mis peaks olema nähtav ja mis mitte.

1. juhtum:
Aeg: praegune aeg
Tervitussõnum: Mis su nimi on?
Sisestusvorm: nähtav

Juhtum 2:
Aeg: praegune aeg
Tervitussõnum: Tere, !
Sisestusvorm: Nähtamatu

Ja nende kahe juhtumi eristamiseks on kontrollida, kas küpsisel on võti kasutajanimi.

Aja uuendamise funktsiooniga on uus skript.js selline, nagu allpool.

Enne nime tippimistPärast nime sisestamist

Okei, tundub, et see töötab.

Muidugi on mõned asjad, mida peame veel parandama, näiteks üleminekumõjud.

Kuid ma annan selle teile.

Mis siis veel?

Peame lisama funktsionaalsuse, mis võimaldab kasutajatel oma pilti muuta.

Unsplash API

Saate hõlpsalt oma rakenduse registreerida ja saada sellelt lehelt loa.

Unsplash API kasutamiseks peate oma rakenduse registreerima nende arendaja lehel.

Kui klõpsate nuppu „Uus rakendus”, saate oma registreeruda.

Demotoodete puhul saate kasutada kuni 50 taotlust tunnis. Ja sellest meile piisab.

Täitke lihtsalt allpool olev vorm, kui soovite.

Sisestage suvaline nimi

Rakenduse loomisel näete suunatud veebisaidil osa võtmeid.

Olen selle rakenduse kustutanud, nii et pole mõtet proovida.

Peate lihtsalt kopeerima pääsuvõtme ja määrama oma javascripti muutujasse ACCESS_KEY.

Kasutame otsimisliidest.

Siin on stsenaarium. Kõigil inimestel on erinevad huvid. Seega tahan kõigepealt küsida nende huvi ja seejärel otsin selle pildi Unsplash API abil. Pärast seda värskendan pilti iga 12 tunni järel (sama märksõna, erinev pilt).

Nii et AJAX funktsioon saab olema nagu allpool.

Ja seda funktsiooni kutsutakse pärast teie huvi sisestamist.

Siis, nagu võite oodata, peame jälle olema arendaja.

Juhtum 1–1: väga esimene kord
Juhtum 1–2: nime järel
2. juhtum: pärast oma huvi sisestamist
Juhtum 3: 12 tundi hiljem.

Olgu, otsustame ükshaaval.

Juhtumi 1–1 puhul peame lihtsalt peitma kogu pildiga seotud osa. Jäta see vahele.

Juhtumil 1–2 näidatakse lihtsalt huvi sisestusvormi.

2. juhul helistage AJAX-i ja salvestage pildi teave.

Valime 3. juhtumi aegumistähtajaks lihtsalt 12 tundi ja kui küpsis on tühi, helistage uuesti AJAXi päringule.

Märksõna: London

Jah, see töötab.

3. etapp: viimased puudutused

Fotograafi krediteerimine pole kohustuslik, kuid miks mitte?

Saame kirjutada veel paar rida koodi ja krediteerida fotograafi nime ja lehe vasakpoolsesse ülanurka.

Et saaksime küpsise esmakordsel kontrollimisel kasutada fotograafi teavet.

Veel üks asi, mis saab siis, kui keegi soovib oma huvi muuta?

Lisagem see funktsioon, mis võimaldab inimestel oma huvi ümber kirjutada.

Enne nupul klõpsamist

Palun. Kui klõpsate nupul „Vali uus huvi”, avab see sisestusvormi, kuhu olete oma huvi varem kirjutanud.

Pärast nupul klõpsamist

4. etapp: tehke oma toode.

Ma tahan, et te kogeksite protsessi algusest lõpuni. Sellegipoolest peate selle ise välja töötama, et õpitud oskusi tõesti omandada.

Peab olema mõned funktsioonid, mida teie arvates oleks hea lisada, näiteks juhusliku pildi valimise viis. Või võite arvata, et mõned minu koodid on ebaefektiivsed. Saate sama toote versiooni parema koodiga täiustada.

Õnne ja ärge andke alla!

Täieliku versiooni leiate siit: https://github.com/thejungwon/MyChromeExtension

See lugu avaldatakse tähelepanuväärses lehes, kuhu tuleb iga päev üle 10 000 lugeja, et õppida tundma inimesi ja ideid, mis kujundavad tooteid, mida me armastame.

Järgige meie väljaannet, et näha rohkem Teataja meeskonna toote- ja disainilugusid.