Geriausia HTML, CSS, „Javascript“ praktika: „Chrome“ plėtinys

Žmonėms, kurie ką tik baigė Codecademy.

Kai studijuojate programavimą, efektyviausias būdas savarankiškai mokytis yra produkto kūrimas. Šis požiūris yra daug greitesnis nei bet kurio programavimo kurso vedimas, norint patobulinti savo programavimo įgūdžius.

Paprastai žmonės pradeda mokytis programavimo naudodami HTML, CSS ir pagrindinį „Javascript“ programaudami žiniatinklyje, tačiau prieš pasiekiant serverio dalį sunku sukurti prasmingą programą.

Taigi, aš visada stengiausi įtikinti studentus taip,

Tai bus smagu, jei pradėsite mokytis serverio pusės ir paleisite kokią nors programą. Prašau, nepasiduok.

tačiau daugelis studentų nustoja mokytis programavimo, kol yra HTML ir CSS.

(Galbūt, norint pradėti žmones mokytis programavimo, pradedama nuo HTML nėra gera idėja.)

Vieną dieną atidariau „Chrome“ naršyklę, kad pradėčiau dirbti. Tada supratau, kad iš tikrųjų naudojau geriausią programą, kurią galite sukurti naudodami tik HTML, CSS ir Javascript.

Akimirka

Trumpai tariant, jei diegsite šį plėtinį „Chrome“, kiekvieną kartą atidarius naują skirtuką, ant nepaprastai šaunios nuotraukos bus pateiktas sveikinimo pranešimas. Atsisiuntimų skaičius jau siekia kelis milijonus. Jei to nenaudojote, labai rekomenduoju įdiegti. Galbūt jūs patirsite šią programą tik 2–3 sekundes kiekviename naujame skirtuke, bet galėsite atsipalaiduoti tą mažą akimirką.

Pabandykime klonuoti šią programą!

1 etapas: Parengti dalykai

  • HTML
  • CSS
  • „Java“ scenarijus
  • Gražus paveikslėlis: nuo neišpūtimo
  • manifest.json (įkeliama iš „Chrome“)

Aš greitai sukūriau programą sutelkdamas dėmesį į dabartį, o ne į ateitį. Žinoma, svarbu turėti konkretų planą, kai tai nėra jūsų solo projektas. Bet! Gyvenimo motyvacija visą gyvenimą yra labai trumpa, todėl kai jaučiatės ką nors išvystę, geriau tai labai greitai užbaikite. Jei pradėsite galvoti apie kitas galimybes, kurios pagerins jūsų produktą, niekada nebaigsi projekto.

Tegul viskas paprasta.

Mes kuriame vieną svetainę, kurioje yra vienas didelis paveikslėlis, vienas didelis sveikinimo pranešimas ir galbūt dabartinis laikas.

Raskite paveikslėlį

Eidami į „Unsplash“ svetainę galite rasti daugybę nuostabių vaizdų, neturinčių licencijos.

Kadangi esu Norvegijoje, nusprendžiau naudoti šią nuotrauką.
Ačiū, Vidar Nordli-Mathisen. (Visada svarbu pripažinti jų talentą.)

Vidaro Nordli-Mathiseno nuotrauka „Unsplash“

Sudaryk projektą

Paprasta Paprasta Paprasta

Vienas HTML failas, vienas CSS, vienas „Javascript“ ir vienas manifesto failas.

Tai viskas, ko mums reikia.

Gerai, kad tai pirmoji versija.

Tai yra paprastas internetinis puslapis. Dabar, norėdami įkelti iš „Chrome“, turite pridėti šį failą manifest.json.

„Chrome_url_overrides“ yra svarbiausia šios programos savybė.

Eikite į plėtinio puslapįSpustelėkite mygtuką „Įkelti neišpakuotą“Projekto aplanke spustelėkite pasirinkimo mygtukąMūsų nuolankus pratęsimas ...Kiekvieną kartą atidarius naują skirtuką, jis parodys jūsų paprastą tinklalapį.

Štai kur jūs ką tik baigėme savo pirmąjį projektą.

Galite naudoti tik šią funkciją. Galbūt jūs galite redaguoti tekstą tokiu dalyku, kuriuo norite save motyvuoti, pavyzdžiui, „neįmanoma yra nieko“, „tiesiog daryk tai“, „mes esame pasaulis“, kažkas-kažkas. O gal vietoj to galite įdėti savo šeimos nuotrauką.

Bet padarykime tai geriau.

2 etapas: Pridedami dalykai

  • Dabartinis laikas
  • Vardo keitimo funkcija
  • Paveikslėlio keitimo funkcija

Norėdami įtraukti šias tris naujas funkcijas, HTML failą pakeičiau taip, kaip nurodyta toliau.

Reikėtų pakeisti ir CSS.

Tada naujas puslapis bus toks, kaip apačioje.

O, aš maniau, kad tai yra momentas :)

Atnaujinamas manifest.json

Dabar pridėsime dvi funkcijas.

Pirmiausia prie šios programos pridėsime įvesties formą, kad žmonės galėtų nurodyti savo vardą. Šią formą pridėsime prie pranešimo „Sveiki, Jungwon Seo“.

Tai negražu, pataisykime tai

Naujas įvesties žymos stilius.

Gerai, daug geriau.

Nuo šiol turime galvoti, kaip išsaugoti šią informaciją.

Mes naudosime „slapuką“, bet negalėsite naudoti „slapuko“, jei tik atidarysite HTML failą iš „Chrome“ naršyklės. Pabandykite išbandyti įkėlę kaip „Chrome“ plėtinį.

Ankstesniame įraše nebuvo teisingos informacijos apie leidimą saugoti. Jums nereikia „saugyklos“ leidimo, kad galėtumėte naudoti „slapuką“.

Be to, kadangi aš vis dar renkuosi naudoti „jQuery“, pridėkime tai.

Bandžiau pridėti jQuery CDN, bet…

Nesijaudinkite, mums tereikia pridėti dar vieną nuosavybę manifest.json.

Gerai, dabar mes pasiruošę įvesti kodą į script.js failą.

Pirmiausia noriu padaryti:

  1. Priverskite vartotojus įvesti savo vardą.
  2. Saugokite sausainiuose (naudokime tik populiariausią kodą)
  3. Ištraukite įvesties formą ir ištrinkite sveikinimo pranešime.

Dabar tai yra pirmas kartas, kai turime galvoti kaip tikras kūrėjas.

1 atvejis: kai atidarote pirmą kartą.
2 atvejis: Kai atidarote jį įvedę savo vardą.

Turime nuspręsti, kas turėtų būti matoma, o kas neturėtų būti.

1 atvejis:
Laikas: Dabartinis laikas
Sveikinimo pranešimas: Koks tavo vardas?
Įvesties forma: matoma

2 atvejis:
Laikas: Dabartinis laikas
Sveikinimo pranešimas: Sveiki, !
Įvesties forma: Nematoma

Ir būdas atskirti šiuos du atvejus yra patikrinti, ar slapukas turi raktą „vartotojo vardas“.

Laiku atnaujinus funkciją, naujas script.js bus toks, kaip nurodyta žemiau.

Prieš įvesdami vardąĮvedę vardą

Gerai, atrodo, kad veikia.

Be abejo, yra keletas dalykų, kuriuos dar turime patobulinti, pavyzdžiui, perėjimo efektai.

Bet aš jums tai duosiu.

Dabar dar kas?

Turime pridėti funkciją, leidžiančią vartotojams pakeisti savo nuotrauką.

„Unsplash“ API

Galite lengvai užregistruoti savo programą ir gauti ženklą iš šio puslapio.

Norėdami naudoti „Unsplash“ API, turite užregistruoti savo programą jų kūrėjo puslapyje.

Spustelėdami „Nauja programa“ galite užregistruoti savo.

Demonstraciniam produktui per valandą bus leidžiama naudoti iki 50 užklausų. To mums užtenka.

Tiesiog užpildykite žemiau esančią formą, kur norite.

Įveskite bet kurį pavadinimą

Jei sukursite programą, pamatysite dalį „Raktai“ nukreiptoje svetainėje.

Aš ištryniau šią programą, todėl nėra prasmės bandyti.

Jums tereikia nukopijuoti „Prieigos raktą“ ir priskirti prie „JavaScript“ kintamojo „ACCESS_KEY“.

Mes naudosime paieškos API.

Štai toks scenarijus. Visi žmonės turi skirtingus pomėgius. Taigi pirmiausia noriu paklausti jų susidomėjimo, o tada aš ieškosiu to vaizdo naudodamas „Unsplash“ API. Vėliau atnaujinsiu vaizdą kas 12 valandų (tas pats raktinis žodis, skirtingas paveikslėlis).

Taigi AJAX funkcija bus tokia, kaip žemiau.

Ši funkcija bus iškviesta įvedus jūsų susidomėjimą.

Tuomet, kaip jūs galite tikėtis, mes vėl turime būti kūrėjais.

1–1 atvejis: labai pirmą kartą
1–2 atvejis: Po vardo
2 atvejis: įvedę savo pomėgį
3 atvejis: po 12 valandų.

Gerai, nuspręskime po vieną.

1–1 atveju reikia tiesiog paslėpti visą su vaizdu susijusią dalį. Praleisti.

1–2 atvejais tiesiog parodykite susidomėjimo įvesties formą.

2 atveju paskambinkite AJAX ir išsaugokite vaizdo informaciją.

3 atveju tegul tiesiog nustato galiojimo laiką 12 valandų ir, jei slapukas tuščias, dar kartą paskambinkite AJAX užklausai.

Raktažodžiai: Londonas

Taip, jis veikia.

3 etapas: Paskutiniai prisilietimai

Nebūtina kredituoti fotografą, bet kodėl gi ne?

Galime parašyti dar keletą kodo eilučių ir įskaityti fotografo vardą ir puslapį viršutinėje kairėje pusėje.

Kad galėtume naudoti fotografo informaciją, kai pirmą kartą tikrinate slapuką.

Dar vienas dalykas, o kas, jei kas nors nori pakeisti savo pomėgį?

Pridėkime šią funkciją, leidžiančią žmonėms iš naujo įvesti savo pomėgį.

Prieš spustelėdami mygtuką

Štai. Jei paspausite mygtuką „Pasirinkti naują pomėgį“, jis suaktyvins atidaromą įvesties formą, kurioje anksčiau rašėte savo pomėgį.

Spustelėję mygtuką

4 etapas: pasigaminkite savo produktą.

Aš tik noriu, kad jūs patirtumėte procesą nuo pradžios iki pabaigos. Vis dėlto, jūs turite patys tai išsiugdyti, kad tikrai įsisavintumėte išmoktus įgūdžius.

Turi būti keletas funkcijų, kurias, jūsų manymu, būtų gerai įtraukti, pavyzdžiui, būdas pasirinkti atsitiktinį paveikslėlį. Arba galite manyti, kad kai kurie mano kodai yra neveiksmingi. Galite patobulinti to paties produkto versiją naudodami geresnį kodą.

Sėkmės ir nepasiduokite!

Pilną versiją galite rasti čia: https://github.com/thejungwon/MyChromeExtension

Ši istorija skelbiama „dėmesio centre“, kur kasdien apsilanko daugiau nei 10 000 skaitytojų, kad sužinotų apie žmones ir idėjas, formuojančius produktus, kurie mums patinka.

Peržiūrėkite mūsų leidinį norėdami pamatyti daugiau produktų ir dizaino istorijų, kurias pristato „Journal“ komanda.