Labākā HTML, CSS, Javascript prakse: Chrome paplašinājums

Cilvēkiem, kuri tikko pabeidza Codecademy.

Kad jūs studējat programmēšanu, visefektīvākais veids pašmācībai ir produkta izstrāde. Šī pieeja ir daudz ātrāka nekā jebkura programmēšanas kursa apmeklēšana, lai uzlabotu savas programmēšanas prasmes.

Parasti Web programmēšanā cilvēki sāk mācīties programmēšanu, izmantojot HTML, CSS un pamata Javascript, tomēr pirms nonākšanas servera pusē ir grūti izveidot jēgpilnu lietojumprogrammu.

Es vienmēr centos pārliecināt studentus šādi:

Tas būs jautri, ja jūs sākat mācīties servera pusē un palaižat kādu lietojumprogrammu. Lūdzu, nepadodies.

bet daudzi studenti pārtrauc programmēšanu, atrodoties HTML un CSS.

(Varbūt sākt ar HTML nav laba ideja, lai mudinātu cilvēkus studēt programmēšanu.)

Kādu dienu es atvēru pārlūku Chrome, lai sāktu darbu. Tad es sapratu, ka patiesībā esmu izmantojis labāko lietojumprogrammu, kuru varat izveidot, izmantojot tikai HTML, CSS un Javascript.

Momentum

Īsāk sakot, ja instalējat šo paplašinājumu pārlūkā Chrome, katru reizi, atverot jaunu cilni, superīgajā attēlā tiks parādīts apsveikuma ziņojums. Lejupielāžu skaits jau ir vairāki miljoni. Ja jūs to vēl neesat izmantojis, ļoti iesaku to instalēt. Varbūt jums būs jāpiedzīvo šī programma tikai 2–3 sekundes par katru jauno cilni, taču jūs varat atpūsties uz šo mazo mirkli.

Mēģināsim klonēt šo lietojumprogrammu!

1. fāze: sagatavošanās lietas

  • HTML
  • CSS
  • Javascript
  • Jauks attēls: no unsplash
  • manifest.json (jāielādē no Chrome)

Es ātri izstrādāju lietojumprogrammu, koncentrējoties uz tagadni, nevis nākotni. Protams, ir svarīgi, lai būtu konkrēts plāns, kad tas nav jūsu solo projekts. Bet! Pašmotivācijas laiks ir ļoti īss, tāpēc, kad jūtaties kaut ko attīstījis, labāk to pabeigt ļoti ātri. Ja jūs sākat domāt par citām iespējām, kas uzlabos jūsu produktu, jūs nekad nepabeigsit savu projektu.

Paturēsim to vienkārši.

Mēs veidojam vienu vietni ar vienu lielu attēlu, vienu lielu apsveikuma ziņojumu un varbūt pašreizējo laiku.

Atrodi attēlu

Dodoties uz vietni Unsplash, jūs varat atrast ļoti daudz lielisku attēlu bez licencēm.

Tā kā esmu Norvēģijā, es nolēmu izmantot šo attēlu.
Paldies, Vidar Nordli-Mathisen. (Vienmēr ir svarīgi atzīt viņu talantu.)

Foto: Vidars Nordli-Mathisen vietnē Unsplash

Izveidojiet projektu

Vienkāršs Vienkāršs Vienkāršs

Viens HTML fails, viens CSS, viens Javascript un viens manifesta fails.

Tas ir viss, kas mums vajadzīgs.

Labi, šī ir pirmā versija.

Šī ir vienkārša vietne. Tagad, lai ielādētu no pārlūka Chrome, jums jāpievieno šāds manifest.json fails.

“Chrome_url_overrides” ir vissvarīgākais īpašums šajā lietojumprogrammā.

Dodieties uz paplašinājuma lapuNoklikšķiniet uz pogas “Ielādēt neiesaiņotu”Projekta mapē noklikšķiniet uz atlasīšanas pogasMūsu pazemīgais pagarinājums ...Katru reizi, atverot jauno cilni, tajā tiks parādīta jūsu vienkāršā vietne.

Jūs dodaties, mēs tikko esam pabeiguši mūsu pirmo projektu.

Jūs to varat izmantot tikai ar šo funkcionalitāti. Varbūt jūs varat rediģēt tekstu uz kaut ko tādu, ar kuru vēlaties sevi motivēt, piemēram, “neiespējami ir nekas”, “vienkārši dari”, “mēs esam pasaule”, kaut kas-kaut kas. Vai varbūt tā vietā varat ievietot ģimenes fotoattēlu.

Bet padarīsim to labāku.

2. posms. Pievienojamās lietas

  • Pašreizējais laiks
  • Nosaukuma maiņas funkcija
  • Attēla mainīšanas funkcija

Lai iekļautu šīs trīs jaunās funkcijas, HTML failu mainīju tāpat kā zemāk.

Jāmaina arī CSS.

Tad jaunā lapa būs tāda kā zemāk.

Ak, es domāju, ka tas bija mirklis :)

Notiek manifesta.json atjaunināšana

Tagad mēs pievienosim divas funkcijas.

Pirmkārt, mēs šai lietojumprogrammai pievienosim ievades formu, lai cilvēki varētu to ievietot. Mēs pievienosim šo veidlapu ziņojumam “Sveiks, Jungwon Seo”.

Tas ir neglīti, izlabosim to

Jauns ievades taga stils.

Labi, daudz labāk.

Kopš šī brīža mums ir jādomā par to, kā uzglabāt šo informāciju.

Mēs izmantosim “sīkfailu”, bet jūs nevarat lietot “sīkfailu”, ja tikai pārlūka Chrome pārlūkā atvērsit HTML failu. Mēģiniet pārbaudīt pēc ielādēšanas kā Chrome paplašinājumu.

Iepriekšējā ziņojumā bija nepareiza informācija par glabāšanas atļauju. Lai izmantotu sīkfailu, jums nav nepieciešama “krātuves” atļauja.

Turklāt, tā kā es joprojām dodu priekšroku jQuery lietošanai, pievienosim to.

Es mēģināju pievienot jQuery CDN, bet…

Neuztraucieties, mums vienkārši jāpievieno vēl viens īpašums vietnē manifest.json.

Labi, tagad mēs esam gatavi kodēt failā script.js.

Tas, ko es vispirms gribu darīt, ir:

  1. Lieciet lietotājiem rakstīt savu vārdu.
  2. Saglabāt sīkdatnē (izmantosim tikai vispopulārāko kodu)
  3. Izbalināt ievades formu un pazust apsveikuma ziņojumā.

Tagad šī ir pirmā reize, kad mums jādomā par īstu izstrādātāju.

1. gadījums: Atverot to pirmo reizi.
2. gadījums: Atverot to pēc vārda ierakstīšanas.

Mums jāizlemj, kam vajadzētu būt redzamam un kam nevajadzētu.

1. gadījums:
Laiks: pašreizējais laiks
Apsveikuma ziņojums: Kāds ir jūsu vārds?
Ievades forma: redzama

2. gadījums:
Laiks: pašreizējais laiks
Sveiciens: Sveiks, !
Ievades forma: Neredzama

Un veids, kā atšķirt šos divus gadījumus, ir pārbaudīt, vai sīkdatnei ir atslēga “lietotājvārds”.

Ar laika atjaunināšanas funkciju jaunais script.js būs tāds, kā norādīts zemāk.

Pirms vārda ierakstīšanasPēc vārda ierakstīšanas

Labi, šķiet, ka tas darbojas.

Protams, ir dažas lietas, kuras mums vēl jāuzlabo, piemēram, pārejas efekti.

Bet es jums to atdošu.

Tagad, kas vēl?

Mums jāpievieno funkcionalitāte, kas lietotājiem ļauj mainīt savu attēlu.

Unsplash API

Jūs varat viegli reģistrēt savu lietotni un iegūt marķieri no šīs lapas.

Lai izmantotu Unsplash API, jūsu lietojumprogramma jāreģistrē izstrādātāja lapā.

Noklikšķinot uz “Jauna lietojumprogramma”, jūs varat reģistrēt savu.

Demonstrācijas produktam jums būs atļauts izmantot līdz 50 pieprasījumiem stundā. Un ar to mums pietiek.

Vienkārši aizpildiet zemāk esošo veidlapu, cik vēlaties.

Ierakstiet jebkuru vārdu

Ja izveidosit lietojumprogrammu, novirzītajā vietnē redzēsit daļu “Taustiņi”.

Esmu izdzēsis šo lietojumprogrammu, tāpēc nav jēgas mēģināt.

Jums vienkārši jānokopē “piekļuves atslēga” un jāpiesaista savā javascript mainīgajā “ACCESS_KEY”.

Mēs izmantosim meklēšanas API.

Šis ir scenārijs. Visiem cilvēkiem ir atšķirīgas intereses. Tāpēc es vispirms gribu jautāt viņu interesei, un tad es meklēšu šo attēlu, izmantojot Unsplash API. Pēc tam es turpināšu atjaunināt attēlu ik pēc 12 stundām (tas pats atslēgvārds, atšķirīgs attēls).

Tātad AJAX funkcija būs tāda kā zemāk.

Šī funkcija tiks izsaukta pēc tam, kad būsit ierakstījis interesi.

Tad, kā jūs varat sagaidīt, mums atkal jābūt izstrādātājiem.

1. – 1. Gadījums: ļoti pirmo reizi
1. – 2. Gadījums: pēc vārda
2. gadījums: pēc tam, kad esat ierakstījis interesi
3. gadījums: 12 stundas vēlāk.

Labi, izlemsim pa vienam.

Gadījumā 1–1 mums vienkārši jāslēpj visa ar attēlu saistītā daļa. Izlaist šo.

1. – 2. Gadījumā parāda tikai ievades formu interesei.

2. gadījumā zvaniet AJAX un saglabājiet attēla informāciju.

3. gadījumā pieņemsim, ka derīguma termiņš ir tikai 12 stundas, un, ja sīkfails ir tukšs, vēlreiz piezvaniet AJAX pieprasījumam.

Atslēgvārds: Londona

Jā, tas darbojas.

3. fāze: pēdējie pieskārieni

Kreditēt fotogrāfu nav obligāti, bet kāpēc gan ne?

Mēs varam uzrakstīt vēl pāris koda rindas un ieskaitīt fotogrāfa vārdu un lapu augšējā kreisajā pusē.

Lai mēs varētu izmantot fotogrāfa informāciju, kad pirmo reizi pārbaudāt sīkfailu.

Vēl viena lieta: kas notiks, ja kāds vēlas mainīt savu interesi?

Piebildīsim, ka šī funkcionalitāte ļauj cilvēkiem atkārtoti rakstīt savu interesi.

Pirms noklikšķināt uz pogas

Lūdzu. Ja noklikšķināsit uz pogas “Izvēlieties jaunu interesi”, tā atvērs ievades formu, kurā iepriekš ierakstījāt savu interesi.

Pēc noklikšķināšanas uz pogas

4. posms: izveidojiet savu produktu.

Es tikai vēlos, lai jūs pieredzētu procesu no sākuma līdz beigām. Tomēr jums tas pats ir jāizstrādā, lai patiešām apgūtu apgūtās prasmes.

Jābūt dažām funkcijām, kuras, jūsuprāt, būtu labi iekļaut, piemēram, veidam, kā izvēlēties nejaušu attēlu. Vai arī jūs varat domāt, ka daži no maniem kodiem ir neefektīvi. Jūs varat uzlabot tā paša produkta versiju, izmantojot labāku kodu.

Veiksmi un nepadodies!

Pilnīga versija atrodama šeit: https://github.com/thejungwon/MyChromeExtension

Šis stāsts tiek publicēts Ievērības cienīgā, kur katru dienu ierodas vairāk nekā 10 000 lasītāju, lai uzzinātu par cilvēkiem un idejām, kas veido produktus, kurus mēs mīlam.

Izlasiet mūsu publikāciju, lai redzētu vairāk produktu un dizaina stāstu, ko piedāvā Journal komanda.