Най-добри HTML, CSS, Javascript практики: разширение на Chrome

За хора, които току-що завършиха Codecademy.

Когато изучавате програмиране, най-ефективният начин за самостоятелно изучаване е разработването на продукт. Този подход е много по-бърз от вземането на всеки курс по програмиране, за да подобрите уменията си по програмиране.

Обикновено хората започват да учат програмиране с HTML, CSS и основен Javascript в уеб програмирането, но преди да стигнат до сървърната част, е трудно да се направи смислено приложение.

Затова винаги съм се опитвал да убеждавам учениците така,

Ще бъде забавно, ако започнете да научавате от страна на сървъра и стартирате някакво приложение. Моля, не се отказвайте

но много студенти спират да учат програмиране, докато са на етап HTML и CSS.

(Може би да се започне с HTML не е добра идея, за да се насърчат хората да учат програмиране.)

Един ден отворих браузъра си Chrome, за да започна работа. Тогава разбрах, че всъщност съм използвал най-доброто приложение, което можете да изградите, като използвате само HTML, CSS и Javascript.

Импулс

За по-кратко, ако инсталирате това разширение на Chrome, всеки път, когато отворите нов раздел, ще се появи поздравително съобщение върху супер готина снимка. Броят на изтеглянията вече е няколко милиона. Ако не сте използвали това, горещо ви препоръчвам да го инсталирате. Може би ще изпитате това приложение само за 2 до 3 секунди на нов раздел, но можете да се отпуснете за този малък момент.

Нека се опитаме да клонираме това приложение!

Фаза 1: Неща, които трябва да се подготвят

  • HTML
  • CSS
  • Javascript
  • Хубава снимка: от разплискване
  • manifest.json (да се зарежда от Chrome)

Начинът, по който бързо разработих приложението, беше като се съсредоточих върху настоящето, а не бъдещето. Разбира се, важно е да имате конкретен план, когато това не е ваш солов проект. Но! Животът на самомотивацията е много кратък, така че когато се почувствате като развивате нещо, по-добре да го завършите много бързо. Ако започнете да мислите за други опции, които ще подобрят вашия продукт, никога няма да завършите проекта си.

Нека да бъдем прости.

Правим един уебсайт с една голяма картина, едно голямо поздравително съобщение и може би текущото време.

Намерете снимка

Ако отидете на уебсайта Unsplash, можете да намерите множество страхотни изображения без лиценз.

Тъй като съм в Норвегия, реших да използвам тази снимка.
Благодаря Видар Нордли-Матисен. (Винаги е важно да признаете техния талант.)

Снимка на Vidar Nordli-Mathisen на Unsplash

Направете проект

Simple Simple Simple

Един HTML файл, един CSS, един Javascript и един файл на манифеста.

Това е всичко, от което се нуждаем.

Добре, това е първата версия.

Това е проста уеб страница. Сега, за да се заредите от Chrome, трябва да добавите следния файл manifest.json.

„Chrome_url_overrides“ е най-важното свойство в това приложение.

Отидете на страницата за разширениеЩракнете върху бутона „Зареждане на непакетирана“Щракнете върху бутона за избор вътре в папката на вашия проектНашето скромно разширение ...Всеки път, когато отворите новия раздел, той ще показва вашата проста уеб страница.

Ето, ние току-що завършихме първия си проект.

Можете да го използвате само с тази функционалност. Може би можете да редактирате текста до нещо, с което искате да се мотивирате, като „невъзможно е нищо“, „просто го направи“, „ние сме светът“, нещо-нещо. Или може би можете да поставите семейната си снимка вместо нея.

Но нека го направим по-добър от това.

Фаза 2: Нещата, които трябва да се добавят

  • Текущо време
  • Функция за промяна на име
  • Функция за промяна на картината

За да включа тези три нови функции, промених HTML файла като по-долу.

CSS също трябва да бъде променен.

Тогава новата страница ще бъде като по-долу.

О, мислех, че това е моментът :)

Актуализиране на manifest.json

Сега ще добавим две функции.

На първо място, ще добавим формуляр за въвеждане в това приложение, така че хората да могат да поставят името си върху него. Ще добавим този формуляр под съобщението „Здравей, Jungwon Seo“.

Това е грозно, нека го поправим

Нов стил за входния маркер.

Добре, много по-добре.

Оттук нататък трябва да мислим как да съхраняваме тази информация.

Ще използваме „бисквитка“, но не можете да използвате „бисквитка“, ако просто отворите HTML файла от Chrome Browser. Опитайте да тествате след зареждане като разширение за Chrome.

В предишната публикация имаше неправилна информация за разрешението за съхранение. Не е нужно разрешение за „съхранение“, за да използвате „Бисквитка“.

Освен това, тъй като все още предпочитам да използвам jQuery, нека го добавим.

Опитах се да добавя jQuery CDN, но ...

Не се притеснявайте, просто трябва да добавим още една собственост в manifest.json.

Добре, сега сме готови да кодираме във файла script.js.

Това, което искам да направя първо, е:

  1. Накарайте потребителите да въведат името си.
  2. Съхранявайте в „бисквитка“ (нека използваме само най-популярния код)
  3. Избледнете формата за въвеждане и избледнете в поздравителното съобщение.

Сега, това е първият път, когато трябва да мислим като истински разработчик.

Случай 1: Когато го отворите за първи път.
Случай 2: Когато го отворите, след като въведете името си.

Трябва да решим какво трябва да бъде видимо и какво не трябва да бъде.

Случай 1:
Време: Текущо време
Поздравително съобщение: Как се казваш?
Форма за въвеждане: Видима

Случай 2:
Време: Текущо време
Поздравително съобщение: Здравейте, <име>!
Форма за въвеждане: Невидима

И начинът за разграничаване на тези два случая е да проверите дали бисквитката има ключа „потребителско име“.

С функцията за актуализиране на времето новият script.js ще бъде като по-долу.

Преди да напишете иметоСлед като напишете името

Добре, изглежда, че работи.

Разбира се, има някои неща, които все още трябва да подобрим, като например преходни ефекти.

Но, ще ви го дам.

Сега какво друго?

Трябва да добавим функционалността, която позволява на потребителите да променят картината си.

API на разплитане

Можете лесно да регистрирате приложението си и да получите знак от тази страница.

За да използвате Unsplash API, трябва да регистрирате приложението си в страницата им за програмисти.

Като щракнете върху „Ново приложение“, можете да регистрирате своето.

За демонстрационния продукт ще ви бъде разрешено да използвате до 50 заявки на час. И това е достатъчно за нас

Просто попълнете по-долу формата, колкото искате.

Въведете произволно име

Ако създадете приложението, ще видите частта „Ключове“ от пренасочения уебсайт.

Изтрих това приложение, така че няма смисъл да пробвам.

Просто трябва да копирате „Ключ за достъп“ и да присвоите вашата променлива на JavaScript „ACCESS_KEY“.

Ще използваме API за търсене.

Ето сценария. Всички хора имат различни интереси. Така че искам първо да попитам интереса им, а след това ще потърся това изображение с помощта на Unsplash API. След това ще продължа да актуализирам изображението на всеки 12 часа (една и съща ключова дума, различна картина).

Така функцията AJAX ще бъде като по-долу.

И тази функция ще бъде извикана, след като въведете интереса си.

Тогава, както можете да очаквате, отново трябва да бъдем програмист.

Случай 1–1: Много първи път
Случай 1–2: След името
Случай 2: След като въведете лихвата си
Случай 3: 12 часа по-късно.

Добре, нека решаваме един по един.

В случай 1–1 просто трябва да скрием цялата част, свързана с изображението. Пропусни това.

В случай 1–2 просто показва формата за въвеждане на лихвата.

В случай 2 се обадете на AJAX и запазете информацията за изображението.

В случай 3, просто задайте времето за изтичане на 12 часа и ако „бисквитката“ е празна, обадете се отново на AJAX заявка.

Ключова дума: Лондон

Да, работи

Фаза 3: Последни щрихи

Не е задължително да кредитирате фотографа, но защо не?

Можем да напишем още няколко реда код и да кредитираме името и страницата на фотографа в горната лява страна.

За да можем да използваме информацията на фотографа, когато проверявате бисквитката за първи път.

И още нещо, какво, ако някой иска да промени интереса си?

Нека добавим тази функционалност, която позволява на хората да въведат отново интереса си.

Преди да кликнете върху бутона

Ето. Ако щракнете върху бутона „Изберете нов интерес“, той ще задейства за отваряне на формата за въвеждане, където сте въвели интереса си преди.

След като щракнете върху бутона

Фаза 4: Направете свой собствен продукт.

Просто искам да изпитате процеса от началото до края. Все пак трябва да развиете това сами, за да усвоите наистина умението, което сте научили.

Трябва да има някои функции, които смятате, че би било добре да включите такива като начина за избор на произволна картина. Или може да мислите, че някои от кодовете ми са неефективни. Можете да подобрите вашата версия на същия продукт с по-добър код.

Успех и не се отказвайте!

Пълната версия можете да намерите тук: https://github.com/thejungwon/MyChromeExtension

Тази история е публикувана в Noteworthy, където 10 000+ читатели идват всеки ден, за да се запознаят с хората и идеите, оформящи продуктите, които обичаме.

Следвайте нашата публикация, за да видите още продукти и дизайнерски истории, представени от екипа на Journal.