Najlepsza praktyka HTML, CSS, JavaScript: Rozszerzenie Chrome

Dla osób, które właśnie ukończyły Codecademy.

Kiedy uczysz się programowania, najbardziej skutecznym sposobem na samokształcenie jest opracowanie produktu. To podejście jest znacznie szybsze niż uczestnictwo w kursie programowania w celu poprawy umiejętności programowania.

Zwykle ludzie zaczynają uczyć się programowania za pomocą HTML, CSS i podstawowego Javascript w programowaniu internetowym, jednak zanim dotrą do części serwerowej, trudno jest stworzyć sensowną aplikację.

Więc zawsze starałem się przekonać studentów w ten sposób,

Będzie fajnie, jeśli zaczniesz uczyć się na serwerze i uruchomić jakąś aplikację. Proszę się nie poddawać.

ale wielu uczniów przestaje się uczyć programowania na etapie HTML i CSS.

(Może rozpoczęcie od HTML nie jest dobrym pomysłem, aby zachęcić ludzi do nauki programowania).

Pewnego dnia otworzyłem przeglądarkę Chrome, aby rozpocząć pracę. Potem zdałem sobie sprawę, że faktycznie korzystałem z najlepszej aplikacji, którą możesz zbudować, używając tylko HTML, CSS i JavaScript.

Pęd

Krótko mówiąc, jeśli zainstalujesz to rozszerzenie w Chrome, za każdym razem, gdy otworzysz nową kartę, pojawi się powitanie nad super fajnym obrazem. Liczba pobrań wynosi już kilka milionów. Jeśli tego nie używałeś, zdecydowanie polecam go zainstalować. Być może będziesz korzystać z tej aplikacji tylko przez 2 do 3 sekund dla każdej nowej karty, ale możesz odpocząć przez chwilę.

Spróbujmy sklonować tę aplikację!

Faza 1: rzeczy do przygotowania

  • HTML
  • CSS
  • JavaScript
  • Ładne zdjęcie: z unsplash
  • manifest.json (do załadowania z Chrome)

Szybko opracowałem aplikację, skupiając się na teraźniejszości, a nie przyszłości. Oczywiście ważne jest, aby mieć konkretny plan, gdy nie jest to twój solowy projekt. Ale! Żywotność motywacji jest bardzo krótka, więc kiedy masz ochotę coś rozwinąć, lepiej szybko ją ukończ. Jeśli zaczniesz myśleć o innych opcjach, które ulepszą Twój produkt, nigdy nie dokończysz swojego projektu.

Uprośćmy to.

Tworzymy jedną stronę internetową z jednym dużym obrazem, jednym dużym pozdrowieniem i być może bieżącym czasem.

Znajdź zdjęcie

Jeśli wejdziesz na stronę Unsplash, znajdziesz mnóstwo fajnych zdjęć bez licencji.

Ponieważ jestem w Norwegii, postanowiłem użyć tego zdjęcia.
Dzięki, Vidar Nordli-Mathisen. (Zawsze ważne jest uznanie ich talentu).

Zdjęcie Vidar Nordli-Mathisen na Unsplash

Zrób projekt

Prosty Prosty Prosty

Jeden plik HTML, jeden CSS, jeden Javascript i jeden plik manifestu.

To wszystko, czego potrzebujemy.

Okej, to jest pierwsza wersja.

To jest prosta strona internetowa. Teraz, aby załadować z Chrome, musisz dodać następujący plik manifest.json.

„Chrome_url_overrides” jest najważniejszą właściwością w tej aplikacji.

Przejdź na stronę rozszerzeniaKliknij przycisk „Załaduj rozpakowane”Kliknij przycisk Wybierz w folderze projektuNasze skromne rozszerzenie…Za każdym razem, gdy otworzysz nową kartę, wyświetli ona twoją prostą stronę internetową.

Proszę bardzo, właśnie zakończyliśmy nasz pierwszy projekt.

Możesz go używać tylko z tą funkcją. Być może możesz edytować tekst na coś, co chcesz zmotywować, na przykład „niemożliwe jest niczym”, „po prostu zrób to”, „jesteśmy światem”, coś - coś. A może zamiast tego możesz umieścić swoje rodzinne zdjęcie.

Ale zróbmy to lepiej.

Faza 2: Rzeczy do dodania

  • Obecny czas
  • Funkcja zmiany nazwy
  • Funkcja zmiany obrazu

Aby uwzględnić te trzy nowe funkcje, zmieniłem plik HTML jak poniżej.

CSS również powinien zostać zmieniony.

Nowa strona będzie wyglądać jak poniżej.

Och, myślałem, że to Momentum :)

Aktualizowanie manifest.json

Teraz dodamy dwie funkcje.

Przede wszystkim dodamy formularz do tej aplikacji, aby ludzie mogli na niej wpisać swoje imię i nazwisko. Dodamy ten formularz pod komunikatem „Cześć, Jungwon Seo”.

To brzydkie, naprawmy to

Nowy styl dla znacznika wejściowego.

Okej, o wiele lepiej.

Odtąd musimy myśleć o tym, jak przechowywać te informacje.

Użyjemy „ciasteczka”, ale nie możesz użyć „ciasteczka”, jeśli tylko otworzysz plik HTML z przeglądarki Chrome. Spróbuj przetestować po załadowaniu jako rozszerzenie Chrome.

W poprzednim poście były nieprawidłowe informacje o pozwoleniu na przechowywanie. Nie potrzebujesz pozwolenia na przechowywanie, aby korzystać z plików cookie.

Ponadto, ponieważ nadal wolę używać jQuery, dodajmy go.

Próbowałem dodać jQuery CDN, ale…

Nie martw się, musimy tylko dodać jeszcze jedną właściwość do manifest.json.

Dobrze, teraz jesteśmy gotowi do kodowania w pliku script.js.

Chcę najpierw zrobić:

  1. Niech użytkownicy wpisują swoją nazwę.
  2. Przechowuj w Cookie (użyjmy najpopularniejszego kodu)
  3. Zanikaj formularz wprowadzania i zanikaj w wiadomości powitalnej.

Teraz po raz pierwszy musimy myśleć jak prawdziwy programista.

Przypadek 1: Przy pierwszym otwarciu.
Przypadek 2: Po otwarciu po wpisaniu imienia i nazwiska.

Musimy zdecydować, co powinno być widoczne, a co nie.

Przypadek 1:
Czas: Aktualny czas
Wiadomość z pozdrowieniami: Jak się nazywasz?
Formularz wejściowy: widoczny

Przypadek 2:
Czas: Aktualny czas
Wiadomość z pozdrowieniami: Cześć, !
Formularz wejściowy: niewidoczny

I sposobem na rozróżnienie tych dwóch przypadków jest sprawdzenie, czy plik cookie ma klucz „nazwa użytkownika”.

Dzięki funkcji aktualizacji czasu nowy skrypt.js będzie wyglądał jak poniżej.

Przed wpisaniem nazwyPo wpisaniu nazwy

OK, wydaje się, że działa.

Oczywiście jest kilka rzeczy, które wciąż musimy poprawić, na przykład efekty przejścia.

Ale dam ci to.

Co jeszcze?

Musimy dodać funkcjonalność, która umożliwia użytkownikom zmianę ich obrazu.

Unsplash API

Możesz łatwo zarejestrować swoją aplikację i uzyskać token z tej strony.

Aby korzystać z Unsplash API, musisz zarejestrować swoją aplikację na stronie programisty.

Klikając „Nowa aplikacja” możesz zarejestrować swoją.

W przypadku produktu demonstracyjnego możesz użyć do 50 żądań na godzinę. I to nam wystarczy.

Wystarczy wypełnić poniższy formularz, jak chcesz.

Wpisz dowolną nazwę

Jeśli utworzysz aplikację, zobaczysz część „Klucze” z przekierowanej witryny.

Usunąłem tę aplikację, więc nie ma sensu próbować.

Wystarczy skopiować „Klucz dostępu” i przypisać do zmiennej javascript „ACCESS_KEY”.

Użyjemy interfejsu API wyszukiwania.

Oto scenariusz. Wszyscy ludzie mają różne zainteresowania. Chcę więc najpierw zapytać o ich zainteresowanie, a następnie przeszukam ten obraz przy użyciu interfejsu API Unsplash. Następnie będę aktualizować obraz co 12 godzin (to samo słowo kluczowe, inne zdjęcie).

Tak więc funkcja AJAX będzie wyglądać jak poniżej.

Ta funkcja zostanie wywołana po wpisaniu zainteresowania.

Następnie, jak można się spodziewać, musimy ponownie zostać programistą.

Przypadek 1–1: bardzo pierwszy raz
Przypadek 1–2: po nazwie
Przypadek 2: Po wpisaniu zainteresowania
Przypadek 3: 12 godzin później.

Okej, zdecydujmy jeden po drugim.

W przypadku 1–1 musimy tylko ukryć całą część związaną z obrazem. Pomiń to.

W przypadku 1–2 pokazuje tylko formularz wprowadzania odsetek.

W przypadku 2 zadzwoń do AJAX i zapisz informacje o obrazie.

W przypadku 3 ustawmy czas wygaśnięcia na 12 godzin, a jeśli ciasteczko jest puste, ponownie wywołaj żądanie AJAX.

Słowo kluczowe: Londyn

Tak, działa.

Faza 3: Ostatnie poprawki

Uznanie fotografa nie jest obowiązkowe, ale dlaczego nie?

Możemy napisać jeszcze kilka wierszy kodu i podać nazwisko i stronę fotografa w lewym górnym rogu.

Abyśmy mogli korzystać z informacji fotografa przy pierwszym sprawdzeniu pliku cookie.

Jeszcze jedno, co jeśli ktoś chce zmienić swoje zainteresowanie?

Dodajmy tę funkcję, która pozwala użytkownikom na ponowne wpisanie zainteresowania.

Zanim klikniesz przycisk

Proszę bardzo. Kliknięcie przycisku „Wybierz nowe zainteresowanie” spowoduje otwarcie formularza wprowadzania, w którym wcześniej wpisałeś swoje zainteresowanie.

Po kliknięciu przycisku

Faza 4: Stwórz własny produkt.

Chcę tylko, abyś doświadczył tego procesu od początku do końca. Jednak musisz to rozwinąć samodzielnie, aby naprawdę przyswoić sobie nabyte umiejętności.

Musi istnieć kilka funkcji, które Twoim zdaniem dobrze byłoby dołączyć, na przykład sposób wyboru losowego obrazu. Lub możesz pomyśleć, że niektóre z moich kodów są nieefektywne. Możesz poprawić swoją wersję tego samego produktu za pomocą lepszego kodu.

Powodzenia i nie poddawaj się!

Pełna wersja znajduje się tutaj: https://github.com/thejungwon/MyChromeExtension

Ta historia została opublikowana w Noteworthy, gdzie ponad 10 000 czytelników przychodzi codziennie, aby dowiedzieć się o ludziach i pomysłach kształtujących produkty, które kochamy.

Śledź naszą publikację, aby zobaczyć więcej artykułów o produktach i projektach przedstawionych przez zespół Journal.