CS-CS.Net: Лаборатория Электрошамана

Система Орфус (Orphus): Баннер

(Дата исходного поста: 07.05.2016, пост обновлён два раза: в 2022 и 2023 годах) Все уже заметили новый баннер от Орфуса у меня на блоге? Я сподобился прилепить эту систему на блог и успешно её затестировал. А заодно решил рассказать другим, потому что про неё почему-то мало написано и мне кажется, что народ боится её встраивать, потому что не понимает чего от неё ожидать и как оно работает: на основном её сайте инфа про её устройство и работу очень скудная. Вот я и решил накатать пост со стороны веб-мастера. И скорее всего и в этом посте будут опечатки — без них никуда %).

Система Орфус (Orphus) — http://orphus.ru/ — заточена под веб-мастеров и авторов статей на сайтах. Её задача — сделать для пользователей удобный сервис, чтобы сообщить автору о косяках на сайте (и особенно в текстах). На самом деле сообщать можно про всё, что можно выделить и что является текстовым: ошибки, опечатки, лексику и прочее. Можно даже кусок текста выделить и написать «У тебя тут ошибка в расчётах».

Система со стороны пользователя

Для пользователя всё просто и легко. Всё, что ему надо — не запрещать HTTP и JavaScript для браузера (а у него это и так не сделано, если он смог страницу открыть). Единственное, о чём народ пока не подумал — это о том, как нажать Ctrl+Enter с планшетиков. Но мне лично пофиг — у меня у самого блог рассчитан на компы =)

Итак, пользователь выделяет опечатку или какой-то кусок текста. Система, кстати, не даёт выделить слишком большой кусок, чтобы кто-то случайно не прислал целый абзац. Причём всё ещё и задумано так здорово, что вам достаточно выделить только косячное слово или опечатку: система сама оттяпает немного текста перед и после ошибки, чтобы админ мог её найти по контексту.

Система Орфус (Orphus): Выбор текста с опечатками

Дальше жмём Ctrl+Enter, и поверх страницы у нас вылезает окошко. Оно написано на HTML+JavaScript. В окошке сразу виден контекст ошибки и то, чего вы там выделили. Вы можете отписать мне комментарий (Alexiy, например обожает вычитывать опечатки и в комментариях писать правильное слово) и отправить это всё.

Система Орфус (Orphus): Отправка опечатки

Технически это выглядит просто: скрипт Orphus сам никакие мыла не отсылает и пароли от них не имеет (и это хорошо). Он просто создаёт обычную HTML-форму и отсылает её данные обычным методом на свой сервер. А дальше уже админская часть сервера это всё разбирает и шлёт админу мыла.

Придумано, я считаю, здорово: система будет работать и не зависеть от браузеров и всяких проксей и прочего.

Система со стороны админа

А теперь посмотрим, как это всё выглядит со стороны админа сайта и владельца системы. Чтобы установить её себе, вам надо заполнить разные настройки на её сайте и зарегистрироваться. Вам будет предложено выбрать вид баннера и скачать картинку баннера и файл скрипта «orphus.js». По умолчанию скрипт рассчитан на то, что он сам и баннер будут лежать в корне сайта. Но при желании вы можете перекинуть баннер куда нравится и выставить правильный путь к нему. Скрипт для этого править не надо! Надо лишь поправить код, который вставляет картинку с этим баннером.

После того, как вы всё настроите — вы можете попасть в свой веб-интерфейс или просто начать получать мыла с ошибками. Внимание! Мыла приходят с задержкой, которая может доходить до дня. Это нормально и париться не надо, хотя я парился когда первый раз тестировал систему и не знал как она работает.

Добавление: примерно в 2018 году мыла приходить ВООБЩЕ перестали, и никакими средствами этого не получалось починить. Я забил и использовал WEB-интерфейс Орфуса.

Присылаемые мыла сделаны грамотно: их можно фильтровать по слову «Orphus» в поле «От», а сортировать по URL страницы в поле «Кому». То есть вы можете отсортировать все мыла по URL страницы, открыть её для правки и пофиксить сразу все опечатки.

Система Орфус (Orphus): Список мыл с ошибками

Присылаемое мыло выглядит таким образом. В нём выделено плохое слово и показан контекст вокруг него, поэтому можно искать опечатку или по кривому слову (как в примере) или по контексту.

Система Орфус (Orphus): Пример письма с ошибкой

Ну и ещё система имеет WEB-интерфейс, которым можно пользоваться даже более удобно, чем почтой. Всё, что пользователи отметили на сайте, валится в огромную таблицу опечаток (которая при желании отдаётся даже по RSS). В таблице каждую строку можно пометить как Спам, как Достоверную опечатку и как Исправленную. Жалко что нет кнопки «Удалить», потому что в итоге даже если пометить чего-то как спам — оно всё равно будет висеть в списке.

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

Система Орфус (Orphus): WEB-интерфейс опечаток

Сам список поделён на разделы (они слева, я их не показал), где все опечатки и собраны по типам. Вообще, с Орфусом можно работать двумя вариантами: забить на WEB-интерфейс и получать мыла. Или же работать и с мылами и с WEB-интерфейсом. Получать мыла о том, что там «шо-то есть», а потом управлять опечатками через WEB-страницу. Мне понравился второй способ. Я накапливаю десятка два мыл, а потом иду на WEB-интерфейс, открываю страницы и правлю.

Орфус хорошо у меня прижился. А вы — молодцы, вы пишете мне даже разные приятные послания! Как это мило! Спасибо вам!

Приятные сообщения от читателя блога в комментариях к опечаткам

Исправление работы сервиса Orphus в 2022 году (Orphus.ru недоступен)

В 2022 году позакрывались многие сервисы и проекты. Орфус был не исключением: его сайт orphus.ru в какое-то время просто перестал работать. Самое обидное для меня — это то, что в последние годы я повадился при помощи опечаток отмечать места своих постов, где надо что-то дописать и вставить ссылки на будущие посты.

Ну, например, в посте про модули ввода-вывода я выделял как опечатку слово «Modbus», писал в комментарии что-то типа «CS: Сюда вставить ссылку на пост про Modbus», и рассчитывал что потом, когда я выпущу этот пост — я найду места, куда надо вставить ссылки.

Теперь все такие отметки (а их было около 120 штук) полностью утеряны. Для меня это явилось первым случаем, когда я не забэкапил данные и потерял их навсегда.

Жизнь не стоит на месте, а на исправление опечаток по Ctrl-Enter я подсел и стал думать то, как это исправить. Так как я ни разу не программист frontend, то я решил попробовать разобраться не с новой формой отправки опечаток, а понять механизм работы сервиса Orphus и выяснить, можно ли переделать его установочный файл так, чтобы он отсылал опечатки мне на сервер.

Вот что удалось выяснить:

• Весь код сервиса, который отвечает за форму «Отправка опечаток по Ctrl-Enter», находится в локальном файле orphus.js, который сервис предлагает скачать и загрузить на свой сервер;
• Этот код обфусцирован (сделан непонятным): имена переменных и функций сокращены до формата «_x»: _1, _2, _3, _56 и так далее;
• При нажатии Ctrl-Enter происходит передача каких-то данных на сервер орфуса, при помощи которых он и видит опечатку. Оказалось, что данные передаются обычным POST-запросом, причём отправляется не сформированная и закодированная строка, а обычная экранная форма (HTML-тэг «<form>»).

Короче, по нажатию Ctrl+Enter скрипт orphus.js создаёт поверх экрана форму, в которой в полях <input> (частично скрытых) хранит все нужные данные: выделенный текст опечатки, комментарий, текст до опечатки и текст после опечатки. А дальше всё это передаётся обычным POST-запросом по адресу, который указан в форме как «action». Прям классика WEB 00ых годов!

Наша задача — поправить код orphus.js так, чтобы передача данных шла не на неработающий сервер Орфуса, а ко мне.

Первым делом моё внимание привлекла переменная «hq», которая имела значение «//orphus.ru/ru/». Я решил поменять её на «cs-cs.net», и получил облом — ошибку «Wrong installation. Please reinstall Orphus.» Так как я не спец в JS (тем более обфусцированном), то я решил поискать в коде атрибут «action», который по любому будет, потому что по другому его обозвать или скрыть никак нельзя.

Нашёл! Исходный код там был такой: «f.action=hq;» — то есть, ссылка на ту самую переменную. Видимо, переменная «hq» проверяется как-то ещё и должна содержать ссылку на сайт орфуса или что-то подобное.

Поэтому я ввёл свою переменную «act», где поставил прямую ссылку на тестовый скрипт, который сам и написал на коленке.

Исправление работы Orphus в 2022: Исходный код сервиса

Дальше мне осталось переписать исходную строку «f.action=hq;» так, чтобы ссылка была на мою переменную: «f.action=act;»:

Исправление работы Orphus в 2022: Изменение адреса скрипта отправки опечаток

А дальше, чтобы прям вот сразу же восстановить функционал сервиса, я написал самый тупейший скрипт на свете: проверка массива $_POST на пустоту и вывод всех его данных при помощи функции print_r() в текстовый лог-файл и на мыло.

Исправление работы Orphus в 2022: Простейший парсер формы опечаток (отправка на E-Mail)

Тупость скрипта в том, что он не имеет защиты от спамеров и хакеров, и любой может срать туда любые данные. В будущем я его защищу хотя бы проверкой referrer и каким-нить хитрым полем, которое зависит от текущих даты-времени.

После первых же проверок оказалось, что в массиве, который отдаёт форма Орфуса, есть все нужные поля:

Исправление работы Orphus в 2022: Запись об опечатках в системном журнале

• ref — ссылка страницы, где обнаружена опечатка
• c_pre — текст до опечатки (до выделенного)
• c_sel — выделенный текст опечатки
• c_suf — текст после опечатки (после выделенного)
• comment — комментарий, который указал пользователь

Мыло приходит мне таким образом, что в его теме есть ссылка на страницу с опечаткой. Это я сделал специально, чтобы сортировать мыла по URL.

Исправление работы Orphus в 2022: Сформированный E-Mail с сообщением об опечатке

Теперь система отправки опечаток снова работает для вас так же, как и раньше!

Народ её уже тестирует. Это так мило:

Исправление работы Orphus в 2022: Народ тестирует работу и умиляет меня =)

В будущих планах у меня сделать такие фишки (это всё про backend на PHP, где я ориентируюсь лучше):

• Передача опечаток прямо в админку WordPress, чтобы оттуда их отбирать по статусу (Спам, Новая, Исправлена);
• Сделать выбор вида того, что отправляем: Опечатка, Комментарий, Исправление и сортировку в админке по ним для того, чтобы можно было отдельно видеть опечатки (и быстро их исправлять), а отдельно сортировать правки к постам;
• Чтобы в админке WordPress сразу же была ссылка для редактирования поста (сейчас текущий скрипт шлёт только ссылку на сам пост);
• Чтобы сохранялись данные о залогиненном юзере, который отправил опечатку. Если он залогинен, конечно!

Установка копии Orphus от ProgerXP на свой сайт и его дополнения (2023.01)

Я ОЧЕНЬ-ОЧЕНЬ благодарен пользователю с ником serafim, который подкинул мне ссылку на GitHub с исходными кодами Orphus (https://github.com/ProgerXP/Orphus, https://proger.me/)! Там код написан более толково, не обфусцирован и более-менее читаем! Я взял его за основу и сделал нормальный FrontEnd так, как хотел. Получилась конфетка:

Новая форма Orphus со своими CSS и типом опечатки (2023)

Добавились те фишки, которые я желал сделать со штатным кодом Orphus (копирайт за описанными здесь доработками сохраняю за собой; их копирование разрешаю при условии, что мне про это скажут, и будет поставлена ссылка на этот пост):

• Свой стиль окна (цвет, размеры, тексты)
• Выбор типа сообщения — Опечатка, Замечание, ToDo. Теперь я могу через «ToDo» посылать себе инфу вида «Добавить тут ссылку на такой-то пост», «Переработать», а вы через «Замечание» посылать инфу про какие-то неточности, мол «Шаман, ты тут напутал: надо брать такой-то коэффициент».
• Передача ID текущего поста, чтобы можно было сформировать ссылку на его редактирование, а не открывать пост и потом нажимать кнопку «Редактировать».
• Передача ID залогиненного пользователя (если есть), который отправил опечатку.

Конфиденциальность данных при этом не страдают, так как вы, зная ID поста, не сможете его редактировать без админских прав, а имя залогиненного пользователя и так пишется под каждым комментарием «Вы вошли как ххх».

Быстренько докрутил код, который формирует мыло с опечаткой. Теперь в теме мыла есть тип сообщения (чтобы сортировать их по теме мыла, которая является ссылкой на пост), а в тексте есть прямая ссылка на редактирование поста. Всё заточено под копипасту! Фрагмент с опечаткой и комментарий выделены цветами.

Вид сообщений E-Mail от новой формы Orphus со ссылкой на редактирование поста

Для того, чтобы это заработало, мне пришлось конкретно повозиться и работать методом натягивания гланд на анус. Дело в том, что вывод формы об опечатке должен работать в браузере пользователя (frontend). И, соответственно, должен быть написан на JavaScript. А этот язык не имеет НИКАКОГО доступа к серверной части сайта (backend) и не может легко и просто вызвать функции API WordPress, чтобы получить, например, ID залогиненного пользователя (get_current_user_id()). Получается классическое «Висит груша, нельзя скушать»!!!

Как можно решить эту задачу:

• Нахерачить Ajax, через который подгружать эти данные на лету при открытии формы отправки опечатки по Ctrl+Enter. Ну Ajax я не умею, и ещё и херь какая-то: это получится публичный незащищённый API, по которому любой дундук по URL поста может получить его ID. И ещё и лишний запрос к серверу.
• На лету генерировать JavaScript-файл orphus.js для каждого клиента, подставляя туда сразу же нужные значения. Идея — гавно, так как все статические элементы сайта (те, которые не меняются на лету — css, js, картинки, медиа-файлы) обычно кешируются браузером на заданное на сервере время. У меня настроено, чтобы кешировалось на год.
• Использовать то, что в JavaScript все переменные, которые объявлены во всех js-файлах или прям в голом HTML-коде страницы через тэг <script>, являются глобальными (если это специально не указано). Тогда наш PHP-backend может выдавать кусочек JavaScript-кода с объявлением нужных переменных. А дальше в orphus.js мы эти переменные будем читать и передавать в опечатку.

Короче, тут где-то Игорь Негода пробегал со словами «Ребята! Щас будет ДИЧЬ!» =)

Вначале я разобрался с генерацией кода с переменными JavaScript (ненавижу это слово — руки ломаю, когда пишу, и язык не любил никогда). Тут всё просто: вызываем нужные функции API WordPress, сохраняем их результаты в переменные PHP, а потом генерируем строки, которые будут вставлены в начало HTML-страницы сайта:

Кусочек кода PHP, который формирует JavaScript-переменные с ID поста и пользователя

В итоге получаем кусочек JavaScript-кода, где на стороне пользователя (frontend) у нас объявлены переменные:

Сформированные JavaScript-переменные с ID поста и пользователя в HTML-коде страницы

Дальше я начал тестировать новый orphus.js из GitHub, и оказалось что в нём нет никаких настроек (стилей) цветов, размеров элементов на форме и даже их положения. Вот это была жопа!!

Полез в режим разработчика в браузере и начал соображать, как там верстается экранная форма:

HTML-вёрстка формы отправки сообщений об опечатке с классами CSS для форматирования

Оказалось, что основная обёртка формы — это DIV с ID «orphusp», в который вложены все другие её элементы. Кое-где элементов мне не хватило, и пришлось добавлять свои классы. Вот их полный список:

• orphusp — общее окно формы опечатки
• legend — текст до фрагмента с опечаткой
• fragment — фрагмент текста с опечаткой
• (добавил) umistape — тэг <span> вокруг выделенной опечатки
• hint — текст после фрагмента с опечаткой
• comment — текст перед полем с комментарием к опечатке
• (добавил) ucomment — текстовое поле для ввода комментария
• buttons — тэг <DIV> с кнопками «Отправить» и «Отмена»
• logo — строка со ссылкой на сайт автора (переместил после кнопок)

Чтобы эти стили не конфликтовали с другими на странице, я описал их через вложенные селекторы CSS. Напоминаю, что ID элементов записываются в CSS через решётку #, а классы — через точку. Конструкция «#orphusp .fragment» означает, что стиль надо применить к классу «fragment», который находится внутри контейнера «orphusp».

Если описать селектор CSS просто как «.fragment» — то тогда стиль применился бы ко всем элементам с классом «fragment» на всей странице вообще. А мало ли кто решит так же свой класс обозвать!

Свой CSS-файл стилей для форматирования формы отправки сообщений об опечатке

Дальше я начал копаться в orphus.js. Это я сейчас рассказываю так понятно и прозрачно. А разбирался я с этим долго, так как считал что кнопка «Отправить» отправляет поля той формы, которая отображается на экране и что если туда просто так добавить раскрывающийся список «Тип сообщения», то он отправится сам собой как элемент этой формы.

А хренушки! Оказалось, что для отправки всех параметров на лету генерируется новая форма с нужными полями <input type = «hidden»>, и отправляется уже она. Так что в код прилось влезть в нескольких местах. Вот что я исправлял:

• Строки локализации, чтобы добавить туда свои строки типа сообщения
• Вёрстку экранной формы, чтобы:
  • Переставить ссылку на авторов после кнопок
  • Добавить нужные классы для элементов формы
  • Добавить свой список типа сообщения
• Код генерации скрытой формы и её полей, чтобы добавить туда свои параметры

Со строками всё просто и удобно. Добавил свои строки в конец массива (а заодно задал нужные настройки скрипта):

Строки в коде Orphus.js (добавлены строки для локализации типа сообщения)

Код вёрстки экранной формы — это МЕШАНИНА. Там собирается длинная-длинная строка HTML-кода для всех элементов формы. Раскрывающийся список в HTML обозначается как <select> с вложенными элементами <option>. Вот я его и добавил с подстановкой текстов из списка строк локализации:

Строки в коде Orphus.js (вставка списка ComboBox/Select для выбора типа сообщения)

Заодно и классы задал (например umistape).

И самое важное и последнее — эти строки кода:

Строки в коде Orphus.js (формирование полей запроса для отправки на сервер)

В них создаётся массив полей, которые будут отправлены скрипту PHP для обработки. Вот туда-то я и вписал те переменные, с которых вся доработка и начиналась! Фуууух! Ура! Всё работает охрененно! А потом я буду постепенно писать backend для WordPress так, чтобы все опечатки можно было обрабатывать в админке, группируя их по посту и по типу, который выбирается из списка.

Проекту исполнилось 15 лет! Поддержать проект материально, проспонсировать проекты Автора или сделать ему подарок можно на этой странице: "Донаты и Спонсорство, Список Желаний".