Nejlepší HTML, CSS, Javascript Practice: Chrome Extension

Pro lidi, kteří právě dokončili Codecademy.

Když studujete programování, nejúčinnějším způsobem samostudia je vývoj produktu. Tento přístup je mnohem rychlejší než absolvovat jakýkoli programovací kurz pro zlepšení vašich programovacích dovedností.

Normálně se lidé začínají učit programovat s HTML, CSS a základním Javascriptem v programování webu, ale než se dostanou na serverovou část, je obtížné vytvořit smysluplnou aplikaci.

Takže jsem se vždy snažil studenty takto přesvědčit,

Bude zábavné, pokud se začnete učit na straně serveru a spouštět nějakou aplikaci. Prosím, nevzdávej se.

ale mnoho studentů přestává učit programování ve fázi HTML a CSS.

(Možná, že začít s HTML není dobrý nápad, aby lidi povzbudili ke studiu programování.)

Jednoho dne jsem otevřel svůj prohlížeč Chrome a začal pracovat. Pak jsem si uvědomil, že jsem vlastně používal nejlepší aplikaci, kterou můžete sestavit pouze pomocí HTML, CSS a Javascript.

Hybnost

Jednoduše řečeno, pokud toto rozšíření nainstalujete do Chromu, pokaždé, když otevřete novou kartu, zobrazí se super super obrázek s pozdravem. Počet stažení je již několik milionů. Pokud jste to nevyužili, důrazně doporučujeme nainstalovat jej. Možná zažijete tuto aplikaci pouze 2 až 3 sekundy na novou kartu, ale můžete si odpočinout na ten malý okamžik.

Zkusme klonovat tuto aplikaci!

Fáze 1: Věci, které je třeba připravit

  • HTML
  • CSS
  • Javascript
  • Pěkný obrázek: z unsplash
  • manifest.json (načíst z Chromu)

Způsob, jakým jsem aplikaci rychle vyvinul, byl zaměřením na přítomnost, nikoli na budoucnost. Samozřejmě je důležité mít konkrétní plán, když to není váš sólový projekt. Ale! Životnost sebepo motivace je velmi krátká, takže když máte chuť vyvinout něco, měli byste to rychle dokončit. Pokud začnete přemýšlet o dalších možnostech, které zlepší váš produkt, nikdy svůj projekt nedokončíte.

Nechme to jednoduché.

Vyrábíme jeden web s jedním velkým obrázkem, jednou velkou uvítací zprávou a možná i aktuálním časem.

Najděte obrázek

Pokud přejdete na web Unsplash, najdete spoustu skvělých obrázků bez licence.

Protože jsem v Norsku, rozhodl jsem se použít tento obrázek.
Díky, Vidar Nordli-Mathisen. (Vždy je důležité uznat jejich talent.)

Foto Vidar Nordli-Mathisen na Unsplash

Vytvořte projekt

Jednoduché Jednoduché Jednoduché

Jeden soubor HTML, jeden CSS, jeden Javascript a jeden soubor manifestu.

To je vše, co potřebujeme.

Dobře, toto je první verze.

Toto je jednoduchá webová stránka. Nyní, aby bylo možné načíst z Chromu, musíte přidat následující soubor manifest.json.

„Chrome_url_overrides“ je nejdůležitější vlastností této aplikace.

Přejděte na stránku rozšířeníKlikněte na tlačítko „Načíst nevybalené“Klikněte na tlačítko výběru uvnitř složky projektuNaše skromné ​​rozšíření ...Při každém otevření nové karty se zobrazí vaše jednoduchá webová stránka.

Tady to je, právě jsme dokončili náš první projekt.

Můžete ji použít pouze s touto funkcí. Možná můžete text upravit tak, aby vás motivoval, například „nemožné není nic“, „prostě to udělejte“, „jsme svět“, něco-něco. Nebo možná můžete místo toho dát svou rodinnou fotografii.

Ale udělejme to lépe než tohle.

Fáze 2: Věci, které se mají přidat

  • Aktuální čas
  • Funkce pro změnu názvu
  • Funkce změny obrazu

Abych zahrnul tyto tři nové funkce, změnil jsem soubor HTML, jak je uvedeno níže.

CSS by mělo být také změněno.

Nová stránka bude potom jako níže.

Oh, myslel jsem, že to byl momentum :)

Aktualizace manifest.json

Nyní přidáme dvě funkce.

Nejprve do této aplikace přidáme vstupní formulář, aby si na ni lidé mohli dát své jméno. Tento formulář přidáme do zprávy „Ahoj, Jungwon Seo“.

To je ošklivé, pojďme to opravit

Nový styl pro vstupní značku.

Dobře, mnohem lepší.

Od této chvíle musíme přemýšlet o tom, jak tyto informace uložit.

Použijeme „cookie“, ale „cookie“ nemůžete použít, pokud otevřete soubor HTML z prohlížeče Chrome. Zkuste po načtení vyzkoušet jako rozšíření pro Chrome.

V předchozím příspěvku nebyly informace o povolení úložiště nesprávné. K používání souboru „cookie“ nepotřebujete povolení „úložiště“.

Také, protože stále raději používám jQuery, přidejte ji.

Snažil jsem se přidat jQuery CDN, ale…

Nebojte se, stačí do manifest.json přidat ještě jednu vlastnost.

Nyní jsme připraveni kódovat v souboru script.js.

Nejdříve chci udělat:

  1. Přinutte uživatele, aby zadali své jméno.
  2. Uložte do souboru cookie (použijeme jen nejoblíbenější kód)
  3. Vybledněte vstupní formulář a zmizte v pozdravové zprávě.

Nyní je to poprvé, co musíme myslet jako skutečný vývojář.

Případ 1: Při prvním otevření.
Případ 2: Když jej otevřete po zadání svého jména.

Musíme se rozhodnout, co by mělo být viditelné a co by nemělo být.

Případ 1:
Čas: Aktuální čas
S pozdravem: Jak se jmenujete?
Vstupní formulář: Viditelný

Případ 2:
Čas: Aktuální čas
Pozdravná zpráva: Dobrý den, !
Vstupní formulář: Neviditelný

Způsob, jak rozlišit tyto dva případy, je zkontrolovat, zda má soubor cookie klíč „uživatelské jméno“.

S funkcí aktualizace času budou nové skripty.js jako níže.

Před zadáním názvuPo zadání názvu

Dobře, zdá se, že to funguje.

Samozřejmě musíme ještě vylepšit některé věci, například přechodové efekty.

Ale dám vám to.

Co jiného?

Musíme přidat funkci, která uživatelům umožní změnit jejich obrázek.

Unsplash API

Můžete snadno zaregistrovat svou aplikaci a získat token z této stránky.

Chcete-li používat rozhraní Unsplash API, musíte svou aplikaci zaregistrovat na stránce vývojáře.

Kliknutím na „Nová aplikace“ se můžete zaregistrovat.

U demonstračního produktu budete moci používat až 50 požadavků za hodinu. A to nám stačí.

Vyplňte níže uvedený formulář, jak chcete.

Zadejte libovolný název

Pokud vytvoříte aplikaci, uvidíte na přesměrovaném webu část „Klíče“.

Tuto aplikaci jsem smazal, takže nemám smysl to zkusit.

Stačí pouze zkopírovat „Přístupový klíč“ a přiřadit do proměnné javascript „ACCESS_KEY“.

Použijeme vyhledávací rozhraní API.

Zde je scénář. Všichni lidé mají různé zájmy. Takže se chci nejprve zeptat na jejich zájem a pak ten obrázek prohledám pomocí rozhraní Unsplash API. Poté obrázek budu aktualizovat každých 12 hodin (stejné klíčové slovo, jiný obrázek).

Funkce AJAX bude tedy níže.

A tato funkce bude vyvolána po zadání vašeho zájmu.

Potom, jak můžete očekávat, musíme být opět vývojáři.

Případ 1–1: Úplně poprvé
Případ 1–2: Za jménem
Případ 2: Poté, co zadáte svůj zájem
Případ 3: 12 hodin později.

Dobře, pojďme se rozhodnout jeden po druhém.

V případě 1–1 stačí skrýt všechny části související s obrázkem. Přeskoč to.

V případě 1–2 se zobrazuje pouze vstupní formulář pro zájem.

V případě 2 zavolejte AJAX a uložte obrazové informace.

V případě 3 nastavíme čas vypršení platnosti na 12 hodin a pokud je soubor cookie prázdný, zavolejte znovu požadavek AJAX.

Klíčové slovo: London

Ano, funguje to.

Fáze 3: Závěrečné úpravy

Fotografování není povinné, ale proč ne?

Můžeme napsat několik řádků kódu a připsat jméno a stránku fotografa na levou horní stranu.

Abychom mohli použít informace fotografa při první kontrole souboru cookie.

Ještě jedna věc, co když někdo chce změnit svůj zájem?

Přidejme tuto funkci, která lidem umožní znovu zadat jejich zájem.

Než kliknete na tlačítko

Tady máš. Pokud kliknete na tlačítko „Vybrat nový zájem“, spustí se otevření vstupního formuláře, kde jste zadali svůj zájem dříve.

Po kliknutí na tlačítko

Fáze 4: Vytvořte si svůj vlastní produkt.

Chci jen, abyste tento proces zažili od začátku do konce. Přesto to musíte vyvinout sami, abyste skutečně absorbovali dovednosti, které jste se naučili.

Musí existovat některé funkce, o kterých si myslíte, že by bylo dobré zahrnout, například způsob výběru náhodného obrázku. Nebo si můžete myslet, že některé z mých kódů jsou neúčinné. Svou verzi stejného produktu můžete vylepšit lepším kódem.

Hodně štěstí a nevzdávejte se!

Kompletní verzi naleznete zde: https://github.com/thejungwon/MyChromeExtension

Tento příběh je publikován v Pozoruhodné, kde 10 000+ čtenářů přichází každý den, aby se dozvěděli o lidech a nápadech, které formují produkty, které milujeme.

Sledujte naši publikaci a podívejte se na další příběhy o produktech a designech, které představil tým časopisu.