Paras HTML, CSS, Javascript-käytäntö: Chrome-laajennus

Ihmisille, jotka ovat juuri päättäneet Codecademyn.

Kun opiskelet ohjelmointia, tehokkain tapa itseopiskeluun on tuotteen kehittäminen. Tämä lähestymistapa on paljon nopeampi kuin minkä tahansa ohjelmointikurssin suorittaminen ohjelmointitaitojen parantamiseksi.

Tavallisesti ihmiset alkavat oppia ohjelmoimaan HTML-, CSS- ja Java-pohjaisen Javascriptin avulla web-ohjelmoinnissa, mutta ennen palvelimen puoleiseen osaan pääsyä on vaikea tehdä tarkoituksenmukainen sovellus.

Joten yritin aina vakuuttaa opiskelijat näin:

On hauskaa, jos aloitat oppimaan palvelinpuolen ja käynnistämään jonkin sovelluksen. Älä anna periksi.

mutta monet opiskelijat lopettavat ohjelmoinnin oppimisen HTML- ja CSS-vaiheissa.

(Ehkä HTML-aloittaminen ei ole hyvä idea kannustaa ihmisiä opiskelemaan ohjelmointia.)

Eräänä päivänä avasin Chrome-selaimen aloittaakseni työn. Sitten tajusin, että olin todella käyttänyt parasta sovellusta, jonka voit rakentaa käyttämällä vain HTML: ää, CSS: ää ja Javascriptiä.

vauhti

Lyhyesti sanottuna, jos asennat tämän laajennuksen Chromeen, joka kerta, kun avaat uuden välilehden, tulee tervehdysviesti superhienon kuvan päälle. Latauksia on jo useita miljoonia. Jos et ole käyttänyt tätä, suosittelen, että asennat sen. Ehkä koet tämän sovelluksen vain 2–3 sekuntia per uusi välilehti, mutta voit rentoutua tuosta pienestä hetkestä.

Yritetään kloonata tämä sovellus!

Vaihe 1: Valmisteltavat asiat

  • HTML
  • CSS
  • javascript
  • Kaunis kuva: alkaen unsplash
  • manifest.json (ladataan Chromesta)

Tapa kehitin sovelluksen nopeasti keskittymällä nykyisyyteen, ei tulevaisuuteen. Tietysti on tärkeää, että sinulla on konkreettinen suunnitelma, kun se ei ole sooloprojektisi. Mutta! Itsemotivaation elinaika on hyvin lyhyt, joten kun tuntuu kehittelevän jotain, lopeta se paremmin nopeasti. Jos alkaa miettiä muita vaihtoehtoja, jotka parantavat tuotteitasi, et koskaan valmista projektiasi.

Pidämme se yksinkertaisena.

Teemme yhden verkkosivuston, jossa on yksi iso kuva, yksi iso tervehdysviesti ja ehkä nykyinen aika.

Etsi kuva

Jos käyt Unsplash-verkkosivustolla, löydät tonnia hienoja lisenssittomia kuvia.

Koska olen Norjassa, päätin käyttää tätä kuvaa.
Kiitos, Vidar Nordli-Mathisen. (On aina tärkeää tunnustaa heidän kykynsä.)

Kuva Vidar Nordli-Mathisen on Unsplash

Tee projekti

Yksinkertainen Yksinkertainen Yksinkertainen

Yksi HTML-tiedosto, yksi CSS, yksi Javascript ja yksi manifestitiedosto.

Se on kaikki mitä tarvitsemme.

Okei, tämä on ensimmäinen versio.

Tämä on yksinkertainen verkkosivu. Nyt, kun haluat ladata Chromesta, sinun on lisättävä seuraava manifest.json-tiedosto.

”Chrome_url_overrides” on tämän sovelluksen tärkein ominaisuus.

Siirry laajennussivulleNapsauta “Lataa pakkaamattomana” -painikettaNapsauta valintapainiketta projektikansion sisälläNöyrä jatkeemme ...Aina kun avaat uuden välilehden, se näyttää yksinkertaisen verkkosivusi.

Sinä menet, olemme juuri päättäneet ensimmäisen projektimme.

Voit käyttää sitä vain tämän toiminnon kanssa. Ehkä voit muokata tekstiä jotain, jolla haluat motivoida itseäsi, kuten “mahdoton ei ole mitään”, “tee vain”, “olemme maailma”, jotain-jotain. Tai ehkä voit laittaa perhekuvasi sen sijaan.

Mutta tehdään siitä parempi.

Vaihe 2: Lisättävät asiat

  • Nykyinen aika
  • Nimenmuutostoiminto
  • Kuvanmuutostoiminto

Sisällyttääksesi nämä kolme uutta ominaisuutta muutin HTML-tiedoston kuten alla.

Myös CSS olisi muutettava.

Silloin uusi sivu on kuin alla.

Voi, ajattelin että se on Momentum :)

Päivitetään manifest.json

Nyt lisäämme kaksi ominaisuutta.

Ensinnäkin, lisäämme syöttömuodon tähän sovellukseen, jotta ihmiset voivat laittaa nimensä sille. Lisäämme tämän lomakkeen "Hei, Jungwon Seo" -viestiin.

Tämä on ruma, korjataan se

Uusi tyyli syöttötunnisteelle.

Okei, paljon parempi.

Tästä lähtien meidän on pohdittava, kuinka nämä tiedot tallennetaan.

Käytämme “evästettä”, mutta et voi käyttää ”evästettä”, jos avaat HTML-tiedoston vain Chrome-selaimesta. Yritä testata lataamisen jälkeen Chrome-laajennuksena.

Edellisessä viestissä oli vääriä tietoja tallennusoikeudesta. Sinun ei tarvitse tallennuslupaa evästeen käyttämiseen.

Lisäksi, koska haluan edelleen käyttää jQueryä, lisäämme sen.

Yritin lisätä jQuery CDN: tä, mutta…

Älä huolestu, meidän on vain lisättävä yksi omaisuus manifest.json-sivustoon.

Hyvä, nyt olemme valmiit koodaamaan script.js-tiedosto.

Ensin haluan tehdä:

  1. Pyydä käyttäjiä kirjoittamaan nimensä.
  2. Tallenna evästeeseen (käytämme vain suosituinta koodia)
  3. Häivyttää syöttömuodon ja häivyttää tervehdysviestin.

Nyt tämä on ensimmäinen kerta, kun meidän on ajateltava kuin oikea kehittäjä.

Tapaus 1: Kun avaat sen ensimmäistä kertaa.
Tapaus 2: Kun avaat sen kirjoittaessasi nimesi.

Meidän on päätettävä, minkä pitäisi olla näkyvää ja minkä ei pitäisi olla.

Tapaus 1:
Aika: Nykyinen aika
Tervehdysviesti: Mikä on nimesi?
Syöttömuoto: Näkyvä

Tapaus 2:
Aika: Nykyinen aika
Tervehdysviesti: Hei, !
Syöttömuoto: Näkymätön

Ja tapa erottaa nämä kaksi tapausta on tarkistaa, onko evästeessä avain käyttäjänimi.

Ajan päivittäessä toiminto, uusi script.js on kuten alla.

Ennen nimen kirjoittamistaKun olet kirjoittanut nimen

Okei, se näyttää toimivan.

Tietenkin on joitain asioita, joita meidän on vielä parannettava, kuten siirtymävaiheen vaikutuksia.

Mutta minä annan sen sinulle.

Mitä muuta?

Meidän on lisättävä toiminto, jonka avulla käyttäjät voivat muuttaa kuvaa.

Unsplash API

Voit rekisteröidä sovelluksesi helposti ja saada tunnuksen tältä sivulta.

Unsplash-sovellusliittymän käyttämiseksi sinun on rekisteröitävä sovelluksesi kehittäjäsivulle.

Napsauttamalla Uusi sovellus voit rekisteröidä oman.

Demotuotteessa saa käyttää enintään 50 pyyntöä tunnissa. Ja se riittää meille.

Täytä vain alla oleva lomake haluamallasi tavalla.

Kirjoita mikä tahansa nimi

Jos luot sovelluksen, näet avaimet-osan uudelleenohjatusta verkkosivustosta.

Olen poistanut tämän sovelluksen, joten ei ole mitään syytä yrittää.

Sinun tarvitsee vain kopioida käyttöavain ja määrittää javascript-muuttujaan ACCESS_KEY.

Käytämme haku-sovellusliittymää.

Tässä on skenaario. Kaikilla ihmisillä on erilaiset intressit. Joten haluan kysyä ensin heidän kiinnostuksensa, ja sitten etsin kyseistä kuvaa Unsplash-sovellusliittymän avulla. Sen jälkeen päivitän kuvaa 12 tunnin välein (sama avainsana, eri kuva).

Joten AJAX-toiminto on kuten alla.

Ja tätä toimintoa kutsutaan kiinnostuksen kirjoittamisen jälkeen.

Sitten, kuten voit odottaa, meidän on jälleen oltava kehittäjä.

Tapaus 1–1: Hyvin ensimmäistä kertaa
Tapaus 1–2: nimen jälkeen
Tapaus 2: Kun olet kirjoittanut kiinnostuksesi
Tapaus 3: 12 tuntia myöhemmin.

Okei, päätetään yksi kerrallaan.

Tapauksessa 1–1 meidän on vain piilotettava kaikki kuvaan liittyvä osa. Ohita tämä.

Tapauksessa 1–2 näyttää vain kiinnostuksen syöttölomakkeen.

Soita tapauksessa 2 AJAX ja tallenna kuvatiedot.

Asetapauksessa 3 viimeinen käyttöaika 12 tunniksi ja jos eväste on tyhjä, soita AJAX-pyyntöön uudelleen.

Avainsana: Lontoo

Kyllä, se toimii.

Vaihe 3: Viimeinen kosketus

Valokuvaajan hyvitys ei ole pakollista, mutta miksi ei?

Voimme kirjoittaa vielä pari riviä koodia ja hyvittää valokuvaajan nimen ja sivun vasempaan yläosaan.

Jotta voimme käyttää valokuvaajan tietoja, kun tarkistat evästeen ensimmäistä kertaa.

Vielä yksi asia, entä jos joku haluaa muuttaa kiinnostuksensa?

Lisäämme sen toiminnallisuuden, jonka avulla ihmiset voivat kirjoittaa kiinnostuksensa uudelleen.

Ennen kuin napsautat painiketta

Ole hyvä. Jos napsautat painiketta “Valitse uusi kiinnostuksen aihe”, se käynnistää avauslomakkeen, johon olet aiemmin kirjoittanut kiinnostuksen.

Kun olet napsauttanut painiketta

Vaihe 4: Tee oma tuote.

Haluan sinun vain kokea prosessin alusta loppuun. Silti sinun on kehitettävä tätä itse, jotta voit todella hyödyntää oppimiasi taitoja.

On oltava joitain toimintoja, jotka mielestäsi olisi hyvä sisällyttää, kuten tapa valita satunnainen kuva. Tai saatat ajatella, että jotkut koodistani ovat tehottomia. Voit parantaa saman tuotteen versiota paremmalla koodilla.

Onnea äläkä anna periksi!

Täydellinen versio löytyy täältä: https://github.com/thejungwon/MyChromeExtension

Tämä tarina julkaistaan ​​huomattavassa paikassa, jossa yli 10 000 lukijaa tulee joka päivä oppimaan ihmisistä ja ideoista, jotka muotoilevat rakastamaamme tuotetta.

Seuraa julkaisuamme nähdäksesi lisää tuote- ja suunnittelutarinoita, joita Journal-tiimi esittelee.