[DTF ReReDesign] Мобильный вид, персонализация, озвучка постов, новый вид реакций

Пришло время для мегаобновы.

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

Кроме того, Петр подкинул(а) пару интересных идей, которые я захотел реализовать вместе с остальными, что висели у меня в туду.

Для тех, кто не знает, что за рередизайн такой — это моё браузерное расширение, которое улучшает ДТФ. Там очень много разных функций. Посты по нему можно найти по тегу #dtf_reredesign.

Ну а мы переходим к описанию новых возможностей!

Новая мобильная версия сайта + PWA

Персонализация. Создайте свой дизайн ДТФ и делитесь вашими темами с другими!

Вернул минусы? (почти)

Озвучка постов

Показывать невозможность комментирования

Новый внешний вид расширения

Прочие изменения и улучшения

Ссылки

Про новое приложение уже, кажется, все всё сказали, но это просто ужас какой-то. Кто подумал, что будет хорошей идеей сделать посты, нажимая на которые попадаешь в ловушку? А если случайно открыл лонг на 1000 фотографий? Будешь сидеть там до конца жизни. Гениально просто.

В общем, я решил полностью переделать их мобильную версию сайта.
Это не отдельное приложение, как у Vino, а просто улучшения уже существующего сайта.

Важно: это будет работать только на мобильных браузерах, которые поддерживают расширения, например Firefox.

Вот что получилось:

Для удобства советую использовать PWA.
Как это сделать:
- Открыть ДТФ в мобильном Firefox
- Установить моё расширение и настроить (это можно только с браузера)
- Нажать на три точки сверху справа
- Нажать ... Больше
- Нажать "Добавить приложение на домашний экран"
- Готово

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

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

Рассмотрим плюсы и минусы.

Последний пункт хочу показать. В оригинальном дизайне сайта, да и приложения, кстати, тоже, не видно большинства ников пользователей из-за нехватки места. А они ещё и новые иконки добавили. Не говоря уже про ярлыки из моего расширения. Поэтому я переделал немного этот элемент:

Теперь перейдём к минусам.

Если что-то можно было сделать лучше или удобнее, или у вас есть ещё идеи — пишите, буду рад отзывам.

Спасибо 🌈 Петру Радько за эту идею! Он предложил добавить возможность менять акцентный цвет на ДТФ, а я уже решил развить эту идею в нечто большее — возможность менять все основные цвета на сайте, а также заменять фон на изображение.

Но самое классное — вы можете поделиться своим творением с другими!

Давайте рассмотрим эту функцию подробнее.

Всего можно изменить 6 цветов:

Небольшая видеодемонстрация:

Что касается изображений, то допускаются следующие форматы: JPEG, PNG, WebP, AVIF, GIF, SVG.

Они загружаются не с вашего компьютера, а через URL.

Если вам нужно что-то анимированное на фоне, то советую формат WebP. В него можно и видео из MP4 конвертировать. Ну или просто старые добрые гифки. Тут уж смотрите сами.

Всё просто — используется Base64. Берётся JSON, содержащий цвета, ссылку на изображение и некоторые параметры, и кодируется. После чего при вставке всё проходит ОЧЕНЬ строгую валидацию и применяется.

Вы всегда можете сами посмотреть, что внутри: пишем в гугл base64 decode и вставляем туда код.

Хочу ещё раз подчеркнуть: я сделал всё, чтобы полностью исключить любые варианты инъекций скрипта через объект, ссылку или код в самой картинке. Ничего из переданных данных не будет напрямую использовано, а скорее воссоздано. Ссылки тоже нормализуются и проверяются.

Единственное, что может получить злоумышленник — это ваш ip-адрес, если захостит картинку у себя на сервере и даст ссылку на неё. Но в этом нет ничего страшного — вы и так показываете свой адрес, заходя на любой сайт.

Пишите, что думаете об этой системе, а также делитесь своими вариантами оформления!

Соотношение реакций — это следующая функция, идею для которой также подкинул 🌈 Петр Радько.

В ней много разных опций, поэтому рассмотрим всё по порядку.

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

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

Дальше рассмотрим опции.

Это альтернативный вид подсчёта реакций, который больше похож на классические минусы. Он объединяет их в одно число по принципу "положительные минус негативные".

При этом число вполне может уйти и в минус:

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

Скрываться будут только те, чей рейтинг ниже 50% при отображении полоски или меньше 0 при отображении рейтинга (это одно и то же). При этом должно быть минимум 5 реакций. Один-единственный покерфейс на посте в свежем не скроет его!

Надо уточнить, что, хотя посты будут полностью убраны из ленты, с комментариями так не получится, потому что они нужны для сохранения нормального вида дерева. Именно поэтому даже модераторы не удаляют их полностью. В этом случае будет точно так же + возможность показать их.

Это последняя и моя любимая опция — она скрывает все реакции, оставляя только выбранный вид рейтинга.

Мой личный выбор настроек: классический вид + комменты + скрыть реакции. Контент не скрывать. Очень чисто и красиво получается:

Ну, их нет. Это был обман. Кликбейт.

Проблема в том, что даже если я отсортирую посты или комменты по рейтингу, бэкенд ДТФа всё равно отправит следующую пачку в том порядке, в котором считает нужным. Как бы я ни сортировал на фронте, оно не сойдётся.

Хоть эта фича по большей части просто визуал, всё равно я доволен результатом. Надеюсь, кому-то тоже зайдёт.

Переходим к следующему крутому нововведению.

Все мы знаем, что дтферы не читают дальше заголовка, да? Но что если я скажу вам, что мы теперь можем не слушать дальше заголовка?

Для этого включаем следующую функцию:

На выбор есть два голоса: мужской и женский.

Также можно настроить громкость и скорость речи.

Сначала я пробовал локальные TTS, но они сильно увеличивали вес расширения и при этом дерьмово звучали. В итоге решил сделать всё через свой сервер. Из-за этого первый запрос на озвучку может занять несколько секунд. Но хорошая новость в том, что я кэширую её, и после первого запроса все последующие будут срабатывать практически моментально. Кэш общий для всех, а это значит, что если кто-то другой уже запускал озвучку этого поста, то вам ждать не придётся.

Хотя голоса звучат хорошо, всё же есть один нюанс. Но это лучше вам самим послушать — я не хочу это комментировать.

Вы видели как классно мини-плеер остаётся в шапке при навигации? Это позволяет слушать пост и при этом свободно открывать любые другие посты и делать что угодно на сайте! Воот...

Ну, переходим к следующей функции.

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

Спасибо @Deckard за эту идею!

С увеличением количества функций, а также их сложности и количества разных опций, я заметил, что мне стало душно от своего же расширения. Я постоянно путался, где что, и не мог быстро найти то, что мне нужно. Иногда думал "вот бы добавили возможность поиска функций". А потом как вспомнил, что я же разработчик, и добавил!

Кроме того, теперь функции логичнее распределены по новым категориям. А ещё их можно сворачивать.

Вот несколько скриншотов:

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

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

Расширение:

Телеграм-канал расширения:

Мой личный тг для связи по любым вопросам:

Сайт для проведения розыгрышей:

Телеграм-канал с автоматической публикацией розыгрышей на ДТФ:

А ещё у меня есть бот, бесплатный аналог местного ChatGPT — NikosBot. Его можно вызвать через упоминание @nikosbot. Всё, что он умеет делать хорошо — это назвать текущий год. Остальное как повезёт.

#dtf_reredesign