Лучший 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, вы можете найти множество интересных изображений без лицензии.

Так как я в Норвегии, я решил использовать эту картинку.
Спасибо, Видар Нордли-Матисен. (Всегда важно признать их талант.)

Фото Видар Нордли-Матисен на 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 ключ «username».

Со временем функция обновления, новый скрипт.js будет как ниже.

Прежде чем вводить имяПосле ввода имени

Ладно, похоже, работает.

Конечно, есть некоторые вещи, которые нам еще нужно улучшить, такие как эффекты перехода.

Но я дам это тебе.

Теперь, что еще?

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

Unsplash 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 часов, а если файл cookie пуст, снова вызовем AJAX-запрос.

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

Да, это работает.

Этап 3: Последние штрихи

Фотографировать не обязательно, но почему бы и нет?

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

Чтобы мы могли использовать информацию фотографа при первой проверке файлов cookie.

Еще одна вещь, что если кто-то захочет изменить свой интерес?

Давайте добавим эту функциональность, которая позволяет людям заново вводить свои интересы.

Прежде чем нажать кнопку

Вот и ты. Если вы нажмете кнопку «Выбрать новый интерес», откроется форма ввода, в которой вы ранее вводили интерес.

После того, как вы нажмете кнопку

Этап 4: Создайте свой собственный продукт.

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

Должны быть некоторые функции, которые, по вашему мнению, было бы полезно включить, например, способ выбора случайного изображения. Или вы можете подумать, что некоторые из моих кодов неэффективны. Вы можете улучшить свою версию того же продукта с помощью лучшего кода.

Удачи и не сдавайся!

Полная версия может быть найдена здесь: https://github.com/thejungwon/MyChromeExtension

Эта история опубликована в «Примечательно», куда ежедневно приходят более 10 000 читателей, чтобы узнать о людях и идеях, формирующих продукты, которые мы любим.

Следите за нашей публикацией, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой журнала