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

Создание заметок

Заметки создаются несколькими способами, в зависимости от вашего рабочего процесса:

1. Подход «от заметки». При необходимости создать заметку можно воспользоваться [[Файловый менеджер|Файловым менеджером]]. Или сочетанием клавиш Ctrl/Cmd+N . Или, если включен плагин [[Палитра команд]], нажать Ctrl/Cmd-p , ввести «создать» и выбрать пункт «Создать новую заметку».
2. Подход «от ссылки». Если вы предпочитаете свободно создавать заметки, просто используйте [[Создание внутренних ссылок|внутреннюю ссылку]] на любое имя заметки (она не обязательно должна существовать в момент создания ссылки). Чтобы начать писать во вновь созданной заметке, просто нажмите на текст ссылки. Заметка автоматически создастся в хранилище и ее можно будет сразу редактировать.

![[Pasted image 3.png]]

После создания заметки, ее имя будет предлагаться в списке автозаполнения имен, так что не придется писать имя заметки целиком каждый раз. Как только вы введете [[ выскочит окошко с перечнем заметок в хранилище. Просто набирайте название до тех пор, пока не появится нужное вам. Затем просто нажмите Return или нажмите на него мышкой, и название будет автоматически заполнено.

Если у вас уже есть структура папок в [[Файловый менеджер|Файловом менеджере]], то создать заметку можно нажав правой кнопкой мыши на папку. При этом заметка будет создана внутри папки:

![[Pasted image 4.png]]

Так же для создания новых заметок и папок могут использоваться кнопки расположенные в верхней части «Файлового менеджера».

Obsidian автоматически сохраняет заметку через 2 секунды после прекращения набора текста или при закрытии области редактирования. Кроме того заметку можно сохранить в любое время нажав Ctrl/Cmd-S .

Создаем на JavaScript приложение записи заметок в реальном времени

Создавая приложение для ведения заметок при помощи Next.js вы бы следовали такой схеме:

• Построение системы авторизации с помощью NextAuth.
• Ее привязывание к MongoDB для сохранения пользователей в базе данных.
• Если вам требуется синхронизация в реальном времени, то написание системы, которая будет реагировать на события в БД соответствующими действиями.

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

Здесь нам на помощь приходит Supabase. Это общедоступный конкурент Firebase, который предоставляет множество сервисов для улучшения приложения. Если при создании блокнота для заметок вы предпочтете задействовать Supabase, то выполнить нужно будет такие шаги:

• Использовать сервис Auth, предоставляющий множество провайдеров авторизации в нескольких строках кода.
• Применить механизм Realtime, который за вас будет обрабатывать все процессы реального времени. Останется лишь сообщить фронтенду о необходимости отображения любых изменений при возникновении события.

В текущей статье мы создадим в Supabase приложение-блокнот с аутентификацией:

В этом приложении также будет использоваться Realtime API, которое позволит Next.js отрисовывать новые заметки без обновления страницы:

Подготовка

Прежде чем перейти к сути, нам понадобиться создать активный проект Supabase.

Создание проекта Supabase

Для этого переходим на страницу Supabase Project и кликаем “New Project”. Здесь регистрируем учетные данные.

После переходим в “Settings” и кликаем “API”:

Находясь в этой панели, скопируйте ваши ключи URL и anon public :

Затем перейдите в проект Next.js и вставьте их в .env.local :

Теперь переходим к настройке экрана Google OAuth.

Google OAuth

Зайдите в Google Cloud Console и создайте новый Oauth Client ID. В разделе “Authorized redirect URIs” введите URL вашего проекта Supabase + /auth/v1/callback .

В завершении нужно ввести в Supabase ваши учетные данные Google. Для этого вернитесь к панели Supabase и вставьте ключи в раздел “Google Enabled” на странице “Auth Settings”.

А теперь напишем для нашего проекта код системы авторизации.

Аутентификация Google

Примечание: в этой статье мы реализуем только клиентскую аутентификацию. Если же вы захотите узнать об аутентификации в Supabase более подробнее, то почитайте эту статью (англ.).

Установка модулей и настройка проекта

Потребуются следующие пакеты:

• @supabase/supabase-js : основная библиотека проекта.
• @supabase/ui : предоставляет набор компонентов UI, необходимых для приложения.
• formik : для захвата пользовательского ввода мы будем использовать формы. Библиотека Formik будет отвечать за обработку отправок этих форм.

Для установки перечисленных зависимостей выполните в терминале:

В качестве второго шага удалите в файле pages/index.js код между тегами div , чтобы в итоге index.js выглядел так:

Структура файлов проекта

Создайте следующие каталоги в директории проекта Next.js:

• utils : здесь будут находиться служебные функции, а также конфигурация клиента Supabase.
• components : здесь будут находиться настраиваемые компоненты.

В итоге у проекта должна получиться такая структура:

Отлично! В следующем разделе мы настроим клиента Supabase.

Настройка Supabase

В каталоге utils создайте файл supabaseClient.js и пропишите в нем следующий код:

• Строки 3–4: получаем ключи клиента из .env.local .
• Строка 5: передаем эти значения в функцию createClient . Так мы инициализируем экземпляр Supabase.
• Строка 7: экспортируем эту конфигурацию Supabase, чтобы использовать ее в проекте.

Далее мы напишем код, который позволит пользователю авторизовываться в приложении и выходить из него.

Служебные функциии авторизации

В каталоге utils создайте файл authentication.js . В нем наберите:

• Строка 2: вызываем функцию auth.signIn . Она будет авторизовывать пользователя с помощью его Google-аккаунта.
• Строка 7: позволяет выходить из аккаунта.

Вот и все! Теперь настроим компонент аутентификации.

Компонент аутентификации

В каталоге components создайте файл Container.js . В этом файле запишите следующий код:

• Строка 7: хук Auth.useUser будет извлекать пользовательские данные.
• Строка 10: если пользователь авторизовался, отображает его имя.
• Строка 13: при клике вызывает метод signOut .
• Строка 14: позволяет пользователю проследовать по маршруту /note . Этот маршрут мы обработаем позже.
• Строка 17: если пользователь не авторизован, отображает дочерние элементы этого компонента.

В качестве второго шага перейдите в pages/_app.js и измените его код так:

• Строки 6–8: компонент Auth использует React’s Context API для отправки пользовательских данных, а также данных текущей сессии. Это позволит сохранять пользовательские сессии между разными маршрутами.

Отлично! Теперь займемся интерфейсом авторизации.

Создание UI авторизации

В /pages/index.js производим следующий импорт:

Далее находим блок return :

Изменяем его так:

• Строка 3: передает экземпляр Supabase в Container в качестве пропса.
• Строка 4: при клике вызывает метод signIn .

Выполняем код и получаем следующий результат:

Отлично! Код работает. Далее займемся построением вокруг него самого приложения.

В итоге /pages/index.js должен выглядеть так:

Функциональность внесения заметок

Прежде, чем писать код, нужно настроить базу данных.

Настройка базы данных

Перейдите в проект Supabase и кликните по вкладке “SQL”, чтобы открыть редактор SQL:

Здесь пишем следующий код SQL:

• Строка 3: в таблице notes у нас будет поле user_id , связывающее ее с auth.users , что позволит создать реляционную таблицу.
• Строки 4–5: у нее также будут поля heading и body с типом text .
• Строка 8: активируем row-level security , необходимую для создания политик.
• Строки 10–17: создаем политики Supabase . Если кратко, то здесь мы сообщаем Supabase, что пользователь имеет доступ к выполнению операций в БД со своими записями.

После этого нужно настроить таблицу на использование Realtime API. Для этого выполняем следующие шаги:

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

Еще один этап завершен! Теперь перейдем к написанию кода вспомогательных функций, которые будут выполнять для базы данных операции CRUD.

Служебные функции

В каталоге utils создайте файл note.js и введите в нем следующий код:

• Строки 4–7: получаем пользовательские записи из таблицы notes и упорядочивает их по возрастанию id .
• Строки 13–16: вставляем заметку в таблицу.
• Строки 24–27: находим заметку с нужным id и удаляем.

После этого можно заняться интерфейсом, который позволит пользователям создавать заметки.

Компонент AddForm

Перейдите в каталог /components/ и создайте файл AddForm.js . В нем введите следующее:

• Строки 8–9: значения-плейсхолдеры для текстовых полей body и heading будут пустыми.
• Строки11–13: при отправке пользователем формы вызываем метод add , который вставляет запись в базу данных.
• Строки 16–17: создаем поля heading и body .

Закончив с AddForm , пора переходить к созданию GUI, который даст пользователю возможность удалять заметки.

Страница Notes и активация подписок

В каталоге /pages создайте файл note.js . В нем введите следующий код:

• Строки 8–10: создаем хуки для хранения пользовательских заметок, чтобы иметь возможность отображать их в DOM.
• Строки 14–18: получаем данные из БД и сохраняем результаты в хуке data . Подписываемся на изменения, происходящие в таблице notes БД в реальном времени.
• Строки 21–30: Подписываемся на изменения, происходящие в таблице notes БД в реальном времени. Если пользователь создал запись (событие INSERT ), то сохраняем ее в хуке newData . Кроме того, если пользователь удаляет запись (событие DELETE ), тогда устанавливаем значение deleteData на эту удаленную заметку.

Теперь нужно прописать логику, которая будет обрабатывать создание/удаление записей. Для этого добавляем в pages/note.js следующий код:

• Строки 2–3: при первом монтировании компонента запускаем функцию getData и метод подписки.
• Строка 6: отписываемся от Realtime, чтобы избежать утечек памяти.
• Строки 12–14: если newData не null , добавляем значение newData в массив data .
• Строка 19: если у deletedData есть значение, удаляем связанный элемент из массива data .

Теперь нам остается лишь отрисовать интерфейс. Для этого пишем в /pages/note.js следующий код:

• Строка 3: отрисовываем элемент AddForm и передаем его в пользовательские данные в качестве пропса.
• Строки 5–10: вызываем метод map для массива data и отображаем поля heading , body и id каждого элемента.
• Строка 11: при клике удаляем указанную заметку.

Выполните код и перейдите в каталог /note . Результат должен выглядеть так:

Вот мы и закончили! Чтобы пронаблюдать real-time функциональность, откройте два экземпляра приложения:

Заметьте, что нам не пришлось обновлять приложение для просмотра изменений. Это подтверждает, что режим реального времени в Supabase работает, как положено.

В итоге /pages/note.js должен выглядеть так:

Заключение

Supabase — это удобная в использовании библиотека, включающая разнообразные возможности, которые упрощают процесс разработки. А благодаря открытому доступу она становится отличным выбором для программистов, которые предпочитают использовать в приложениях open source-технологии. Если у вас есть проект, которому нужна аутентификация и прочие возможности, Supabase станет отличным дополнением для набора инструментов.

В Google Chrome появились заметки на веб-страницах. Вот как это работает

В браузере Google Chrome появилась функция добавления заметок для сайтов. Пользователи могут выделять текст и добавлять к нему свои примечания, чтобы в будущем их просматривать.

Детям из Мариуполя нужно 120 ноутбуков для обучения — подари старое «железо», пусть оно работает на будущее Украины

Что произошло

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

Заметки добавляются после выделения текста и нажатия на правую клавишу мышки. В контекстном меню предложат добавить примечание.

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

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

Не пропустите ни одной важной новости от MC.today

На Reddit уже предположили, что пользователи так начнут сохранять логины и пароли к сайтам, что плохо для конфиденциальности.

Добавлять заметки также можно к ссылкам и изображениям. Уже после добавления их можно отредактировать или удалить.

При переходе на страницу с заметками браузер автоматически запускает пользовательский интерфейс Notes – боковая панель открывается автоматически. Выбранный текст, в который вы добавили заметки, выделяется фиолетовым цветом, но в будущем у пользователя будет выбор из цветов.

Как скачать

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

Если вы уже хотите протестировать функцию – нужно установить версию браузера для разработчиков.

Напомним, ранее Google выпустил бесплатную операционку Chrome OS Flex. Она Эта работает на облаке и предназначена для того, чтобы дать вторую жизнь устаревшим компьютерам Windows и Mac.

Видео #22. Создание веб-заметок

Еще одним нововведением браузера Edge является возможность создания заметок на веб-страницах.

Мы можем прямо на странице добавлять текстовые комментарии, выделять участки текста или рисовать.

Затем все наши заметки можно сохранить или вставить в виде изображения в другую программу.

Итак, на панели инструментов браузера есть кнопка «Создать веб-заметку».

Нажатие этой кнопки приводит к появлению панели инструментов с элементарными функциями рисования.

Мы можем выбрать цвет и размер пера и далее с помощью него нарисовать что-либо на открытой веб-странице или подчеркнуть участок текста.

Далее с помощью маркера, который имеет аналогичные настройки, мы можем выделять текст, акцентируя внимание на нем.

Если какой-то элемент вы нарисовали неправильно или ошибочно, то его можно всегда удалить с помощью инструмента Ластик.

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

Ну и последний инструмент — Обрезать.

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

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