Найкращі практики 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, ви зможете знайти безліч класних зображень без ліцензій.

Оскільки я в Норвегії, я вирішив використати це зображення.
Спасибі, Відар Нордлі-Матісен. (Завжди важливо визнати їх талант.)

Фото Відара Нордлі-Матісона на знімку

Складіть проект

Простий Простий Простий

Один HTML-файл, один CSS, один Javascript та один файл маніфесту.

Це все, що нам потрібно.

Гаразд, це перша версія.

Це проста веб-сторінка. Тепер для завантаження з Chrome ви повинні додати такий файл manifest.json.

"Chrome_url_overrides" - найважливіша властивість цієї програми.

Перейдіть на сторінку розширенняНатисніть кнопку Натисніть кнопку вибору всередині папки вашого проектуНаше скромне продовження ...Щоразу, коли ви відкриваєте нову вкладку, вона відображатиме вашу просту веб-сторінку.

Ось ми закінчили наш перший проект.

Ви можете використовувати його лише з цією функціональністю. Можливо, ви можете відредагувати текст чимось, чим ви хочете мотивувати себе, наприклад, "неможливо нічого", "просто зроби це", "ми - світ", щось-щось. А може, замість цього ви можете поставити свою сімейну фотографію.

Але давайте зробимо це краще, ніж це.

Фаза 2: Що потрібно додати

  • Поточний час
  • Функція зміни імені
  • Функція зміни зображення

Щоб включити ці три нові функції, я змінив файл HTML, як показано нижче.

CSS теж слід змінити.

Тоді нова сторінка буде, як нижче.

О, я подумав, що це імпульс :)

Оновлення manifest.json

Тепер ми додамо дві функції.

Перш за все, ми додамо форму введення до цієї програми, щоб люди могли вкласти її ім’я. Цю форму ми додамо під повідомленням "Привіт, Jungwon Seo".

Це некрасиво, давайте це виправимо

Новий стиль для тегу введення.

Гаразд, набагато краще.

Відтепер нам потрібно думати про те, як зберігати цю інформацію.

Ми будемо використовувати "cookie", але ви не можете використовувати "cookie", якщо ви просто відкриєте файл HTML із браузера Chrome. Спробуйте перевірити після завантаження як розширення Chrome.

У попередньому дописі була недостовірна інформація про дозвіл на зберігання. Вам не потрібно дозволу "зберігання", щоб використовувати "Cookie".

Крім того, оскільки я все ще вважаю за краще використовувати jQuery, додамо його.

Я спробував додати jQuery CDN, але…

Не хвилюйтесь, нам просто потрібно додати ще одну властивість у manifest.json.

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

Перше, що я хочу зробити:

  1. Змусити користувачів вводити своє ім’я.
  2. Зберігати в Cookie (давайте використовувати найпопулярніший код)
  3. Вимкніть форму введення та зникають у вітальному повідомленні.

Зараз це перший раз, коли нам доводиться думати, як справжній розробник.

Випадок 1: Коли ви відкриваєте його вперше.
Випадок 2: Коли ви відкриваєте її після введення свого імені.

Нам потрібно вирішити, що має бути видно, а що не повинно бути.

Випадок 1:
Час: Поточний час
Вітання: Як тебе звати?
Форма введення: Видима

Випадок 2:
Час: Поточний час
Вітальне повідомлення: Привіт, <ім'я>!
Форма введення: Невидима

І спосіб розмежувати ці два випадки - це перевірити, чи має файл cookie ключ "ім'я користувача".

З функцією оновлення часу новий script.js буде, як нижче.

Перш ніж набрати ім’яПісля введення імені

Гаразд, здається, це працює.

Звичайно, є деякі речі, які нам ще потрібно вдосконалити, такі як ефекти переходу.

Але я вам його дам.

Тепер, що ще?

Нам потрібно додати функціональність, яка дозволяє користувачам змінювати зображення.

Скасувати API

Ви можете легко зареєструвати додаток і отримати маркер на цій сторінці.

Для використання API Unsplash API потрібно зареєструвати свою програму на їхній сторінці розробника.

Натиснувши

Для демонстраційного продукту вам дозволяється використовувати до 50 запитів на годину. І цього нам достатньо

Просто заповніть форму нижче, як вам захочеться.

Введіть будь-яке ім’я

Якщо ви створите програму, ви побачите частину "Ключі" з перенаправленого веб-сайту.

Я видалив цю програму, тому немає сенсу намагатися.

Вам просто потрібно скопіювати "ключ доступу" та призначити в змінну javascript "ACCESS_KEY".

Ми будемо використовувати API пошуку.

Ось сценарій. Усі люди мають різні інтереси. Тож спершу я хочу запитати їх зацікавленість, а потім шукаю це зображення за допомогою API Unsplash. Після цього я продовжуватиму оновлювати зображення кожні 12 годин (те саме ключове слово, інше зображення).

Тож функція AJAX буде, як нижче.

І ця функція буде викликана після введення інтересу.

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

Випадок 1–1: Дуже перший раз
Випадок 1–2: Після назви
Випадок 2: Після введення відсотків
Справа 3: 12 годин пізніше.

Гаразд, давайте вирішувати по черзі.

У випадку 1–1 нам просто потрібно приховати всю частину зображення, що стосується зображення. Пропустіть це.

У випадку 1–2 просто відображається форма введення відсотків.

У випадку 2 зателефонуйте до AJAX та збережіть інформацію про зображення.

У випадку 3 давайте просто встановіть час закінчення терміну дії на 12 годин, а якщо файл cookie порожній, знову зателефонуйте на запит AJAX.

Ключове слово: Лондон

Так, це працює

Фаза 3: Заключні штрихи

Не обов'язково кредитувати фотографа, але чому б ні?

Ми можемо написати ще пару рядків коду та зарахувати ім’я та сторінку фотографа вгорі ліворуч.

Щоб ми могли використовувати інформацію фотографа, коли ви перевіряєте файл cookie вперше.

Ще одне, що робити, якщо хтось хоче змінити свою зацікавленість?

Додамо таку функціональність, яка дозволяє людям повторно вводити свої інтереси.

Перш ніж натиснути кнопку

Ось так. Якщо ви натиснете кнопку "Вибрати новий інтерес", це призведе до відкриття форми введення, де ви ввели свій інтерес раніше.

Після натискання на кнопку

Фаза 4: Створіть власний виріб.

Я просто хочу, щоб ви відчували цей процес від початку до кінця. Тим не менш, вам потрібно розвивати це самостійно, щоб по-справжньому засвоїти майстерність, яку ви засвоїли.

Повинні бути деякі функції, які, на вашу думку, було б добре включити такі, як спосіб вибору випадкової картини. Або ви можете подумати, що деякі мої коди неефективні. Ви можете вдосконалити свою версію того ж продукту за допомогою кращого коду.

Успіхів і не здавайся!

Повну версію можна знайти тут: https://github.com/thejungwon/MyChromeExtension

Ця історія опублікована у «Заслуговує на увагу», куди щодня приходять 10 000+ читачів, щоб дізнатися про людей та ідеї, що формують продукти, які ми любимо.

Слідкуйте за нашою публікацією, щоб побачити більше продуктів та дизайнерських історій, представлених командою журналу.