Najlepšie postupy HTML, CSS, Javascript: Rozšírenie Chrome

Pre ľudí, ktorí práve dokončili Codecademy.

Keď študujete programovanie, najúčinnejším spôsobom samoštúdia je vývoj produktu. Tento prístup je omnoho rýchlejší ako absolvovanie akéhokoľvek programovacieho kurzu na zlepšenie vašich programovacích schopností.

Normálne sa ľudia začínajú učiť programovať pomocou HTML, CSS a základného Javascriptu vo webovom programovaní, ale predtým, ako sa dostanú na serverovú časť, je ťažké vytvoriť zmysluplnú aplikáciu.

Takže som sa vždy snažil študentov takto presvedčiť,

Bude zábavné, ak sa začnete učiť na strane servera a spustíte nejakú aplikáciu. Prosím, nevzdávaj sa.

ale veľa študentov sa prestane učiť programovať, zatiaľ čo vo fáze HTML a CSS.

(Možno nie je vhodné začať s HTML, aby sme ľudí povzbudili, aby študovali programovanie.)

Jedného dňa som otvoril prehliadač Chrome, aby som začal pracovať. Potom som si uvedomil, že som vlastne používal najlepšiu aplikáciu, ktorú môžete zostaviť iba pomocou HTML, CSS a Javascript.

Spád

Stručne povedané, ak nainštalujete toto rozšírenie do prehliadača Chrome, pri každom otvorení novej karty sa zobrazí super správa s vynikajúcim obrázkom. Počet stiahnutí je už niekoľko miliónov. Ak ste to ešte nepoužili, dôrazne vám odporúčame nainštalovať ho. Možno zažijete túto aplikáciu iba na 2 až 3 sekundy na novú kartu, ale na chvíľu si môžete oddýchnuť.

Skúsme klonovať túto aplikáciu!

Fáza 1: Čo je potrebné pripraviť

  • HTML
  • CSS
  • Javascript
  • Pekný obrázok: z unsplash
  • manifest.json (načítať z prehliadača Chrome)

Aplikácia sa rýchlo vyvíjala tak, že som sa sústredila na prítomnosť, nie na budúcnosť. Samozrejme je dôležité mať konkrétny plán, keď to nie je váš samostatný projekt. Ale! Životnosť sebimotivácie je veľmi krátka, takže keď máte chuť vyvíjať niečo, mali by ste to veľmi rýchlo dokončiť. Ak začnete uvažovať o ďalších možnostiach, ktoré vylepšia váš produkt, nikdy svoj projekt nedokončíte.

Nechajme to jednoduché.

Vyrábame jeden web s jedným veľkým obrázkom, veľkým pozdravom a možno aj aktuálnym časom.

Nájdite obrázok

Ak prejdete na webovú stránku Unsplash, nájdete veľa skvelých snímok bez licencie.

Keďže som v Nórsku, rozhodol som sa použiť tento obrázok.
Vďaka, Vidar Nordli-Mathisen. (Vždy je dôležité uznať ich talent.)

Foto: Vidar Nordli-Mathisen, Unsplash

Vytvorte projekt

Jednoduché Jednoduché Jednoduché

Jeden súbor HTML, jeden CSS, jeden Javascript a jeden súbor manifestu.

To je všetko, čo potrebujeme.

Dobre, toto je prvá verzia.

Toto je jednoduchá webová stránka. Teraz, ak chcete načítať z prehliadača Chrome, musíte pridať nasledujúci súbor manifest.json.

„Chrome_url_overrides“ je najdôležitejšou vlastnosťou tejto aplikácie.

Prejdite na stránku rozšíreniaKliknite na tlačidlo „Načítať nezbalené“Kliknite na tlačidlo výberu vo vašom priečinku projektuNaše skromné ​​rozšírenie ...Zakaždým, keď otvoríte novú kartu, zobrazí sa vaša jednoduchá webová stránka.

Tam idete, práve sme dokončili náš prvý projekt.

Môžete ju používať iba s touto funkciou. Možno môžete text upraviť na niečo, čím sa chcete motivovať, napríklad „nemožné nie je nič“, „proste to urobte“, „sme svet“, niečo-niečo. Alebo môžete namiesto toho dať svoju rodinnú fotografiu.

Ale urobme to lepšie ako toto.

Fáza 2: Veci, ktoré sa majú pridať

  • Aktuálny čas
  • Funkcia zmeny názvu
  • Funkcia zmeny obrazu

Aby som zahrnul tieto tri nové funkcie, zmenil som súbor HTML, ako je uvedené nižšie.

Tiež by sa malo zmeniť CSS.

Potom bude nová stránka podobná nižšie.

Oh, myslel som si, že to bol momentum :)

Aktualizácia manifest.json

Teraz pridáme dve funkcie.

Najprv do tejto aplikácie pridáme vstupný formulár, aby si ľudia mohli do nej zadať svoje meno. Tento formulár pridáme do správy „Ahoj, Jungwon Seo“.

To je škaredé, opravme to

Nový štýl pre vstupnú značku.

Dobre, oveľa lepšie.

Odteraz musíme myslieť na to, ako tieto informácie uložiť.

Použijeme „cookie“, ale „cookie“ nemôžete použiť, ak v prehliadači Chrome otvoríte iba súbor HTML. Skúste po načítaní vyskúšať ako rozšírenie pre prehliadač Chrome.

V predchádzajúcom príspevku neboli správne informácie o povolení na ukladanie. Na používanie súboru „cookie“ nie je potrebné povolenie „úložisko“.

Aj keď stále radšej používam jQuery, pridajme ho.

Snažil som sa pridať jQuery CDN, ale ...

Nebojte sa, stačí do manifest.json pridať ešte jednu vlastnosť.

Teraz sme pripravení kódovať v súbore script.js.

Najprv chcem urobiť:

  1. Nútte používateľov, aby zadali svoje meno.
  2. Uložte do súboru cookie (použite najpopulárnejší kód)
  3. Stlmte vstupný formulár a zoslabujte pozdrav.

Teraz je to prvýkrát, čo musíme myslieť ako skutočný vývojár.

Prípad 1: Pri prvom otvorení.
Prípad 2: Keď ho otvoríte po zadaní mena.

Musíme sa rozhodnúť, čo by malo byť viditeľné a čo by nemalo byť.

Prípad 1:
Čas: Aktuálny čas
S pozdravom: Ako sa voláte?
Vstupný formulár: Viditeľné

Prípad 2:
Čas: Aktuálny čas
Pozdravná správa: Dobrý deň, !
Vstupný formulár: Neviditeľný

Spôsob, ako rozlíšiť tieto dva prípady, je skontrolovať, či má súbor cookie kľúč „používateľské meno“.

S funkciou aktualizácie času budú nové skripty.js rovnaké ako nižšie.

Pred zadaním názvuPo zadaní názvu

Dobre, zdá sa, že to funguje.

Samozrejme, stále je potrebné vylepšiť niektoré veci, napríklad prechodné efekty.

Ale dám ti to.

Čo ešte?

Musíme pridať funkciu, ktorá používateľom umožní zmeniť ich obrázok.

Unsplash API

Svoju aplikáciu si môžete jednoducho zaregistrovať a získať token z tejto stránky.

Ak chcete používať rozhranie Unsplash API, musíte svoju aplikáciu zaregistrovať na stránke vývojára.

Kliknutím na položku Nová aplikácia sa môžete zaregistrovať.

V prípade ukážkového produktu budete môcť používať až 50 žiadostí za hodinu. A to je pre nás dosť.

Vyplňte, prosím, nasledujúci formulár.

Zadajte ľubovoľný názov

Ak vytvoríte aplikáciu, na presmerovanej webovej stránke sa zobrazí časť „Kľúče“.

Túto aplikáciu som odstránil, takže to nemá zmysel.

Stačí skopírovať prístupový kľúč a priraďovať do svojej premennej javascript ACCESS_KEY.

Použijeme vyhľadávacie rozhranie API.

Tu je scenár. Všetci ľudia majú rôzne záujmy. Preto sa chcem najprv opýtať ich záujmu a potom vyhľadám tento obrázok pomocou rozhrania Unsplash API. Potom aktualizujem obrázok každých 12 hodín (rovnaké kľúčové slovo, iný obrázok).

Funkcia AJAX bude tak ako je uvedené nižšie.

A táto funkcia bude volaná po zadaní záujmu.

Potom, ako môžete očakávať, musíme byť opäť vývojármi.

Prípad 1 - 1: Úplne prvýkrát
Prípad 1–2: Za menom
Prípad 2: Po zadaní záujmu
Prípad 3: o 12 hodín neskôr.

Dobre, poďme sa rozhodnúť jeden po druhom.

V prípade 1–1 musíme skryť všetku časť súvisiacu s obrázkom. Preskočiť to.

V prípade 1–2 sa zobrazuje iba vstupný formulár pre záujem.

V prípade 2 zavolajte AJAX a uložte obrazové informácie.

V prípade 3 nastavíme čas uplynutia platnosti na 12 hodín a ak je súbor cookie prázdny, zavolajte znova na žiadosť AJAX.

Kľúčové slovo: London

Áno, funguje to.

Fáza 3: Záverečné úpravy

Fotografovať nie je povinné, ale prečo nie?

Môžeme napísať niekoľko riadkov kódu a pripísať meno a stránku fotografa na ľavú hornú stranu.

Aby sme mohli použiť informácie fotografa pri prvej kontrole súboru cookie.

Ešte jedna vec, čo keď niekto chce zmeniť svoj záujem?

Pridajme túto funkciu, ktorá ľuďom umožní znovu napísať ich záujem.

Pred kliknutím na tlačidlo

Nech sa páči. Ak kliknete na tlačidlo „Vybrať nový záujem“, spustí sa otvorenie vstupného formulára, kde ste predtým zadali svoj záujem.

Po kliknutí na tlačidlo

Fáza 4: Vytvorte si vlastný produkt.

Chcem len, aby ste tento proces zažili od začiatku do konca. Stále to musíte rozvíjať sami, aby ste skutočne absorbovali zručnosti, ktoré ste sa naučili.

Niektoré funkcie, o ktorých si myslíte, že by bolo vhodné zahrnúť, ako napríklad spôsob výberu náhodného obrázka, musia existovať. Alebo si môžete myslieť, že niektoré z mojich kódov sú neefektívne. Svoju verziu toho istého produktu môžete vylepšiť lepším kódom.

Veľa šťastia a nevzdávajte sa!

Kompletnú verziu nájdete tu: https://github.com/thejungwon/MyChromeExtension

Tento príbeh je publikovaný v pozoruhodnom vydaní, kde každý deň príde 10 000 čitateľov, aby sa dozvedeli viac o ľuďoch a nápadoch, ktoré formujú výrobky, ktoré milujeme.

V našej publikácii nájdete ďalšie príbehy o produktoch a dizajnoch, ktoré predstavil tím časopisu.