Как делать заметки на сайте

Делаем пометки на веб-страницах при помощи расширения

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

Приступим к реализации:
Переходим на официальный сайт приложения, используя ссылку и нажимаем на кнопку «Get Space Chrome Extension»:

Откроется окно расширения в магазине Chrome, устанавливаем его и закрепляем значок приложения:

После обучения появится предложение о регистрации, что откроет доступ ко множеству новых функций. Проходим её, адрес электронной почты подтверждать не нужно:

Можно использовать текст, прямые линии, ручной рисунок карандашом и многое другое. Также все добавленные элементы можно свободно передвигать или же удалять, для этого понадобиться предпоследний инструмент на панели. Для сохранения нажимаем на значок в правом нижнем углу и получаем страницу в PDF—формате:

Также, если в правом нижнем углу нажать на значок желтой стрелки, то можно поделиться ссылкой на отредактированную страницу для остальных пользователей:

Как добавить заметку на веб-страницу

С расширением Note Anywhere можно оставить заметку на любой веб-странице

Блокнотики, заметочки, записочки… Мы так привыкли пользоваться всеми способами напоминалок, что, подчас, этих инструментов нам не хватает в виртуальной реальности. Но есть чудесное расширение, с которым вы будете чувствовать себя спокойно, и никогда не забудете то важное, что вы хотели бы увидеть еще раз на любой веб-странице. Хотите узнать, как добавить заметку на любом сайте?

Расширение Note Anywhere для Google Chrome

Скачивайте расширение Note Anywhere для Google Chrome, это целый сервис по созданию стикеров на веб-страницах, а я вам расскажу, как его можно использовать. После установки расширения, в браузере появится желтая иконка расширения. Нажмите на нее для активации расширения, находясь на любом сайте. В этот момент на странице появится желтый стикер, цвет которого вы можете изменить в настройках. Кроме цвета, можно изменить внешний вид наклейки, размер надписи и шрифт.

Нажимая на “Примечания Сводка” – появляется стикер, в котором есть все ссылки на те страницы, где вы оставляли заметки. Мои заметки находятся только на этом сайте, поэтому в стикере отобразились 3 ссылки на мой сайт. При нажатии на “Настройки” – появляется панель настроек шрифта, цвета и размера текста. При изменении настроек появляется маленький стикер, который будет фиксировать все проводимые вами изменения. Как только вы измените цвет фона, стикер также изменит свой цвет.

Теперь можно стикер переместить в любое место страницы, которое считаете важным для себя. Вы, наверное, знаете, что веб-мастерам очень часто приходится редактировать статьи, но не всегда это можно сделать сразу. А идею или задачу сохранить хочется, чтобы не забыть. Безусловно, для организации работы всегда можно применить массу полезных инструментов, те же документы Google… Но, согласитесь, что гораздо удобнее оставить заметку непосредственно на нужной странице и заглянуть в удобное время – стикер подскажет, что именно нужно сделать.

Как делаю я?!

Например, я увидела в одном видео информацию, которая не была отражена в статье о плагине ColorZilla для определения цвета. Сразу подумала, что было бы неплохо недостающую информацию добавить в статью, которую я написала раньше. Как сделать, чтобы напоминалка была все время перед глазами? Решила сделать два стикера: один непосредственно в самой статье, а второй оставить на странице блога, чтобы знать, в какой статье нужно сделать дополнение. Вот как это выглядит:

Заметка в статье Заметка на главной странице блога

Теперь, заглянув на сайт (у кого-то это может быть главная страница сайта, в моем случае все статьи находятся в блоге), надоедливый желтый цвет стикера каждый день мне будет напоминать о том, что нужно сделать. Представьте, сколько важных дел мы упускаем из виду только потому, что забываем, что и где нужно сделать? А если на стикере запланировать время, то заметка превратится в планировщик наших дел. Здорово?!

Важно! Если вы оставите заметку на странице, и потом закроете браузер, то открыв снова в любое время эту же страницу, стикер будет находиться в том месте, где вы его оставили. Проверьте сами.

А еще бывают статьи нужные, но длинные… И, даже, если добавил источник в закладку, то спустя какое-то время, очень сложно вспомнить и найти нужный фрагмент. Note Anywhere поможет и в этом случае: оставьте стикер в нужном месте статьи, и будьте уверены, что важную часть текста вы найдете без особого труда.

Иконка в браузере подскажет, сколько заметок находится на данной странице, а дата и время – когда была сделана заметка.

Количество заметок на странице

Идеи для применения стикеров

Столько идей можно придумать для применения данного расширения. В комментариях пишите свои идеи, друзья!

• На главной странице сайта можно оставлять заметки с темой или заголовком будущей статьи.
• Кто-нибудь из вас забывал вывести деньги с партнерки? Стикер напомнит!
• В соцсетях (если вы работаете админом или ведете свою группу) можно стикерами украсить весь паблик: как правило, дел, которые нужно сделать – великое множество.
• Отправить письмо, сообщение.
• И т.д. и т.п.

Минусы и плюсы расширения Note Anywhere

1. Единственный минус, который сразу бросается в глаза – неспособность стикера отображать текст ссылки. Поэтому придется искать ссылку либо в два этапа, как я написала выше, либо заглянуть в параметры расширения и найти нужную ссылку там.
2. Зато самое полезное свойство желтого стикера – постоянно напоминать о себе. С одной стороны, он немного напрягает, а с другой – вовремя подсказывает. Ищем золотую середину))

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

Spade — расширение для Chrome, которое позволяет делать пометки на веб-страницах

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

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

Разработчики не забыли про ластик и перемещение сделанных пометок, что поможет работать аккуратнее. Ошибки исправляются стандартным возвратом к предыдущему шагу (Ctrl + Z) либо стрелочками на панели инструментов Spade. Страницу можно очистить от записей целиком, нажав на красный крестик в нижней правой части экрана.

Там же есть кнопка для генерирования ссылки на сайт с вашими пометками. Её можно скопировать и отправить через мессенджер или по электронной почте.

Кроме того, страницу с пометками можно экспортировать в формате PDF. Этот вариант пригодится, например, для обмена правками с коллегами или сохранения важных идей в память устройства. Есть возможность загружать и свои PDF‑файлы, чтобы работать с ними так же, как с веб‑страницами.

Пишем приложение для заметок на JavaScript

Сегодня мы с вами, как следует из названия, напишем простое приложение для формирования и хранения заметок.

Возможности нашего приложения будут следующими:

1. Создание заметки.
2. Хранение заметок.
3. Удаление заметки.
4. Отметка о выполнении задачи.
5. Информация о дате выполнения задачи.
6. Напоминание о необходимости выполнения задачи.

Заметки будут храниться в индексированной базе данных (IndexedDB). Для облегчения работы с IndexedDB будет использована эта библиотека. Как заявляют разработчики данной библиотеки, она представляет собой «тоже самое, что и IndexedDB, но с промисами».

Предполагается, что вы знакомы с азами IndexedDB. Если нет, то прежде чем продолжить рекомендую прочитать эту статью.

Я понимаю, что для решения такой задачи, как хранение заметок, вполне достаточно LocalStorage. Однако, мне хотелось исследовать некоторые возможности IndexedDB. Таким образом, выбор в пользу последней был сделан исключительно из гносеологических соображений. В конце будут приведены ссылки на похожее приложение, где хранение данных реализовано с помощью LocalStorage.

Итак, поехали.

Наша разметка выглядит так:

1. Поля для ввода можно было создать с помощью тегов «figure» и «figcaption». Это было бы так сказать «семантичнее».
2. Как впоследствии оказалось, выбор тега «input» с типом «date», был не лучшим решением. Об этом ниже.
3. В одном из приложений напоминания (уведомления) реализованы с помощью Notifications API. Однако мне показалось странным запрашивать у пользователя разрешение на показ уведомлений и добавлять возможность их отключения, поскольку, во-первых, когда мы говорим о приложении для заметок (задач), напоминания подразумеваются, во-вторых, их можно реализовать так, чтобы они не раздражали пользователя при многократном появлении, т.е. ненавязчиво.
4. Изначально в приложении предусматривалась возможность указывать не только дату, но и время напоминания. Впоследствии я решил, что даты достаточно. Впрочем, при желании ее легко добавить.

Пока не обращайте на них много внимания.

Переходим к скрипту.

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

Создаем базу данных и хранилище:

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

Теперь займемся формированием списка:

Массив объектов для хранения дат напоминаний имеет два поля: «id» для идентификации заметки и «date» для сравнения дат. Записывая значение даты напоминания в поле «date», мы вынуждены это значение преобразовывать, поскольку inputDate.value возвращает данные в формате «гггг-мм-дд», а мы собираемся сравнивать эти данные с данными в привычном нам формате, т.е. «дд.мм.гггг». Поэтому мы используем метод «replace» и регулярное выражение, где с помощью группировки инвертируем блоки и заменяем дефисы точками. Возможно, существует более универсальное или элегантное решение.

Далее работаем с заметками:

Функция удаления заметки из списка и хранилища выглядит так:

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

Функция проверки напоминаний сравнивает текущую дату и даты напоминаний, введенные пользователем:

В завершение добавляем к объекту Window обработчик ошибок, которые не были обработаны в соответствующих блоках кода: