весь начать новую тему

Ещё одна темная тема для реактора (мои рассуждения + код)

Доброго времени суток, глубокоуважаемые пидоры и прочие интересные личности.

Использовал я значит раньше тему Dark Reactor [by Sirko] [Fixed by FeaR], которую допилил напильником и выложил на greasyfork.org. Однако подумал что она слишком тяжела и пора бы запилить нечто более легкое. То есть, представленная ниже тема минимально затрагивает разметку css сайта, а также не содержит никаких картинок. И вот что я делал.

Как наверное кто-то (а может и нихуя никто) видел в моих предыдущих кастомных темах я использую расширение Tampermonkey, отличительной особенностью которого (а также его подобий типа greasemonkey) в том, что он позволяет исполнять пользовательские скрипты JavaScript, как-то изменяя или дополняя функционал различных сайтов. Поскольку я не программист, попытаюсь порассуждать с позиции того что я понял как обычный мимокрокодил, прошу не пинать за неточности формулировок или ламерство.

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

Так вот начало скрипта document.addEventListener("DOMContentLoaded"... по сути позволяет добавлять в обработчики событий документа событие когда весь документ можно сопоставить со всей его иерархией. Ну а дальше идет представление пользовательского стиля css, в котором я меняю разметку, а после - внедрения стиля при помощи внутреннего инструмента GM_addStyle, который встроен в Tampermonkey. Либо PRO_addStyle или addStyle или ручное внедрение стиля средствами js.

Что касается самого стиля - во первых вместо шапки с пекафейсом простая заливка linear-gradient. Минималистично, и не требуется отображать пиксельную картинку как в предыдущей теме раньше.

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

И что самое интересное - айфреймы. Если кто не знает - iframe это контейнер который разрешает стороннему сайту встроить в него что хочешь, например плеер с видеороликом. Вообще, с фреймами на джое что-то странное, так как допустим при размещения ютуп-ролика сайт будет встраивать в пост окно разрешения 560 на 315. У меня уже давно вопрос встал - нахуя, а главное - зачем? Неужели чтобы тренировать наше потраченное от дрочки на трапов зрение? Хотя, я так полагаю чтобы была какая-никакая совместимость с небольшими дисплеями 1024х768 на которых до сих пор сидят олдфаги..

Как бы то ни было, я решил этот момент в три строчки. Буквально.

iframe {

width: 100%;

aspect-ratio: 16 / 9;

height: auto;

}

Первое - даем фрейму ширину его родителя, так как это может быть блок нового поста или комментарий. Второе - устанавливаем правило в соотношение сторон фрейма, ведь 560х315 - это тоже самое соотношение 16 на 9. Третье, даем авто-высоту, благодаря установленным выше двум правилам. Всё.

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

iframe[src^='https://w.soundcloud.com'] {

aspect-ratio: auto;

}

Ролики ютуб почти все с таким соотношением, фрейм дают стандартно. А вот с остальными, типа куб, как посмотреть - вертикальный фрейм не будет растягиваться по ширине блока поста, а встанет гордо по центру. Хуй с ним тогда.

Для гифок я сделал поменьше плашку их скачивания, так ИМХО красивше:

Отельный гемор еще раньше, для предыдущей темы вызвала посветка родительского комментария. Это когда наводишь на коммент и подсвечивается он и его родитель. Я долго искал где это в css, но потом вяснил что это реализовано при помощи того же JS. Пришлось инкапсулировать не только css, но и js, в итоге стало темнее:

Ну и в остальном, прошу любить и жаловаться!

https://greasyfork.org/ru/scripts/464142-new-dark-reactor-by-donotblink

Прошу писать в комментах, если что я упустил или что-то написал коряво и надо бы доделать/переделать.

Темная тема работает через расширение для браузеров: Tampermonkey или Greasemonkey:

* greasemonkey (в Firefox'е) https://addons.mozilla.org/ru/firefox/addon/greasemonkey/

* tampermonkey (в Хроме, Опере и для Firefox)

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

Пидоры и пидоре_ссы! Мы вытерпели этот 2023 год (Ozon671Games)

Мои поздравления, реакторчане.

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

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

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

Всех модераторов различных фэндомов отдельно поздравляю, сегодня я опоздал с ивентом на пару часов, надеюсь вы всё успели вовремя.

Предлагаю вам, по старой традиции, встретить этот Новый Год вновь на просторах нашего прекрасного сайта JoyReactor.

Cделайте фотографию, на которой должно быть запечатлено следующее: еда или питьё с которым вы обычно встречаете Новый Год (оливье, мандарины, бокал шампанского или что-нибудь другое), монитор с открытым джойреактором и бумажка, с написанной на ней датой (когда была сделана фотография). Получившуюся фотографию поместите в комментарии к этому посту, если хотите получить медальку, а если вы делаете отдельный пост (крайне не рекомендуется), то скидываем ссылку мне поста в личку, но не злоупотребляем этим. Также, когда прикрепляем фото в комментариях, то пишем пожелания в Новом Году горячо любимым (и не очень) соседям по нашему пристанищу.
Если по каким-то причинам у вас возникли трудности, то вы можете написать мне в ЛС, описав свою ситуацию и мы вместе придём к консенсусу о выдачи вам медальки, дерзайте.

Медалька будет выдаваться только тем, кто сделает это до 23:59 3 января по московскому времени. (в этом году аттракцион щедрости продлевается на 1 день) 

Если вы встретили Новый Год с нами впервые, то вы получите такую медальку:

ссылка на гифку

Медаль для тех, кто получил три прошлые новогодние медальки:

ссылка на гифку

Кто получил четыре прошлые новогодние медальки:

ссылка на гифку

Получил пять прошлых, получишь эту:

ссылка на гифку

Получил шесть медалек, получишь и седьмую (ковидная медалька):

ссылка на гифку

Семь раз отмерь, восьмую получи:

ссылка на гифку

Цифра 9 не похожа на 6, но не только лишь все их не спутают:

ссылка на гифку

ссылка на гифку

ВнеОЧ(КО)ередной непростой год завершился, пидоры и пидоре_ссы....

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

Все думали, что только 2020 и 2021 будут годами пиздеца, но хуй там плавал.
Прошу прощения, увлёкся....
Желаю вам всего хорошего, мои дорогие, у нас в теге artist появилось много новых авторов именно с Реактора, чему я несказанно рад.
Все вы большие молодцы, даже в эти времена вы заходили на наш любимый сайт: залить свой контент, порофлить с преколов и полюбоваться на различные разделы артов, эротики, ониме и не только.
Кармодрочеры и дикие заливалы (все мы знаем кто хуесос), благодарю вас за постоянное наполнение нашего сайта своими постами)

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

Предлагаю вам, по старой традиции, встретить этот Новый Год вновь на просторах нашего прекрасного сайта JoyReactor.

Cделайте фотографию, на которой должно быть запечатлено следующее: еда или питьё с которым вы обычно встречаете Новый Год (оливье, мандарины, бокал шампанского или что-нибудь другое), монитор с открытым джойреактором и бумажка, с написанной на ней датой (когда была сделана фотография). Получившуюся фотографию поместите в комментарии к этому посту, если хотите получить медальку, а если вы делаете отдельный пост (крайне не рекомендуется), то скидываем ссылку мне поста в личку, но не злоупотребляем этим. Также, когда прикрепляем фото в комментариях, то пишем пожелания в Новом Году горячо любимым (и не очень) соседям по нашему пристанищу.

Медалька будет выдаваться только тем, кто сделает это до 23:59 2 января по московскому времени.

Если вы встретили Новый Год с нами впервые, то вы получите такую медальку:

Уже отпраздновали новый год на реакторе и получили медаль в прошлом году? В таком случае у меня есть для вас ещё одна медалька:

А если вы уже получили две предыдущие новогодние медальки, то тогда у вас есть возможность получить ещё одну медаль:

ссылка на гифку

И ещё одна медаль для тех, кто получил три прошлые новогодние медальки:

ссылка на гифку

Медаль для тех, кто получил четыре прошлые новогодние медальки:

ссылка на гифку

Медалька для тех, кто получил уже пять предыдущих медалек:

ссылка на гифку

Если вы выжили в 2020 году, то хвала вам и заявОЧКА на долгую жизнь. И вы молодцы, что продолжаете вашу традицию праздновать с нами свой Новый Год, получите седьмую медальку:

ссылка на гифку

А вот если вы протянули 2021 год и до сих пор не откинулись, то милости просим к нашему столу за восьмой медалькой:

ссылка на гифку

Ну, а если вы смогли остаться людьми в 2022 и вы не ненавидите человечество, то вот вам медалька за девятый год на нашем ламповом сайте:

ссылка на гифку

Всем хорошего настроения и тепла в эти непростые времена. Всем добра от меня, мои дорогие реакторчане и реакторчанки в этот год Черного Водяного Кролика)

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

В Петербурге в десятки раз участились наезды самокатчиков на пешеходов

Очередной непростой год завершился, пидоры и пидоре_ссы

Мои поздравления, реакторчане. В этот год не будет вам фотошопа с масочками, ибо они уже всех зае[цезура Вождя]и, будет вам Мао в Новогоднем Образе).

Всех Вас заранее поздравляю (успел до 00:00 на Дальнем Востоке, фьюх) и желаю всего самого лучшего в Новом Году.

Предлагаю вам, по старой традиции, встретить этот Новый Год вновь на просторах нашего прекрасного сайта JoyReactor, но немного изменим правила...

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

Медалька будет выдаваться только тем, кто сделает это до 2 января 00:00 по московскому времени.

Уже отпраздновали новый год на реакторе и получили медаль в прошлом году? В таком случае у меня есть для вас ещё одна медалька:

А если вы уже получили две предыдущие новогодние медальки, то тогда у вас есть возможность получить ещё одну медаль:

ссылка на гифку

И ещё одна медаль для тех, кто получил три прошлые новогодние медальки:

ссылка на гифку

Медаль для тех, кто получил четыре прошлые новогодние медальки:

ссылка на гифку

Медалька для тех, кто получил уже пять предыдущих медалек:

ссылка на гифку

Если вы выжили в 2020 году, то хвала вам и заявОЧКА на долгую жизнь. И вы молодцы, что продолжаете вашу традицию праздновать с нами свой Новый Год, получите седьмую медальку:

ссылка на гифку

А вот если вы протянули 2021 год и до сих пор не откинулись, то милости просим к нашему столу за восьмой медалькой:

ссылка на гифку

Ну чё народ, погнали на[цензура Вождя]й! йОБАНЫЙ РОТ!!!

Черновики в новой форме создания постов

Напоминаю, что новая форма - это вот эта https://m.joyreactor.cc/post/new

Зачем черновики? Почему этой фиче дали высокий приоритет?

Первое и самое очевидное - очень обидно, когда с любовью написанная и скомпонованная простыня текста пропадает из-за перезагрузки страницы. Теперь весь текст раз в 20 секунд сохраняется в ваше локальное хранилище браузера (local storage), и вы видите вот такое сообщение

Картинки, которые вставлены не по ссылке (которые вы вкопипастили или драг-н-дропнули) сначала отправляются на сервер. На сервере во временном хранилище они будут храниться сутки.

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

Второе и неочевидное - нам нужны длиннопосты. По техническим причинам мы не можем принимать за раз более 10Мб, и если отправить весь пост с 30 картинками с компа пользователя скопом, может случится бяда (пост отторгнется). С черновиками каждая картиночка будет загружаться по очереди, и бяда вряд ли случится. Но ограничение 10Мб на одну картинку остается.

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

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

"Ленивая" загрузка картинок + остановка гифок на плохом интернете

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

Что такое "ленивая" загрузка?

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

Это полезно и с точки зрения экономии трафика, и с точки зрения более приоритетной загрузки именно тех картинок, у которых максимальный шанс быть посмотренными.

Раньше мы полагались на библиотеку nextjs в вопросе "ленивой" загрузки картинок, но в новой версии они - согласно современным практикам - отказались от своих механизмов и перешли на встроенные механизмы "ленивой" загрузки в браузерах. Стало лучше!

Для примера рассмотрим, как работает "ленивая" загрузка картинок в Хроме (и в браузерах на Chromium). С июля 2020 года разработчики браузера изменили расстояние от видимого экрана, на котором картинки начинают загружаться. Для быстрого интернета это расстояние уменьшили с 3000 пикселей до 1250 пикселей, для медленного - с 4000 пикселей до 2500.

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

Сурс: https://web.dev/browser-level-image-lazy-loading/

В разных браузерах могут быть разные расстояния от видимой части экрана.

А что же гифки?

Гифки и гифковидео(видеогифки?) тоже подвластны этому механизму браузера. В дополнение мы в качестве эксперимента добавляем новый механизм остановки гифковидео для плохого интернета.

Если браузер решил начать загрузку видеогифки, но за 5 секунд загрузка не закончилась полностью, мы ставим видео на паузу и показываем контролы. Это выглядит вот так:

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

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

Обратная связь

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

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

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

А вот инструкция как прислать репорт о баге на новом движке нам: https://m.joyreactor.cc/report

До связи, драгоценные!

Редактирование комментов + возможности нового редактора на базе Slate

На новом движке добавлена функция редактирования комментов. Свой коммент можно отредактировать в течение 5 минут после создания (а удалить-то пока нельзя, лол).

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

Если ее нажать, то покажется встроенная форма редактирования.

Вполне возможно, что надо отмечать каким-то значком, что коммент был отредактирован. А то первый товарищ напишет что-нибудь разумное, доброе и вечное, второй товарищ ответит, что полностью согласен. А первый воткнет в свой коммент что-то другое (надеюсь, не менее разумное), например "ТЫ ПИДОР", с чем тоже можно согласиться, но все-таки...

Что думаете?

Возможности нового редактора

Для создания и редактирования постов и комментов на m.joyreactor.cc используется новый редактор на базе Slate - https://www.slatejs.org/examples/. Выглядит так:

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

Наш редактор комментов может в том числе следующее:

- Он умеет вставлять в комменты видеогифки, таблицы и спойлеры.

Вот такие!

- Можно вставлять скриншоты прямо из буфера обмена (другие картинки тоже). Делаете скриншот с занесением в буфер обмена, тыкаете в поле редактора, жмете Ctrl+V. Или копируете картинку по правому клику в браузере, курсор в поле редактора, Ctrl+V.

- Можно драг-н-дропать картинки с диска. Одну или несколько сразу.

ссылка на гифку

- Можно вставить youtube- и vimeо-видео, coub напрямую в поле редактора по ссылке. Берете ссылку, устанавливаете курсор в нужное место в поле редактора и Ctrl+V.

1) Slate - сырой движок, не дошедший до первой стабильной версии. Сейчас он у нас 0.97.2. Это значит, что есть повышенная вероятность глюков и падений.

2) Плоховатенько работает на телефонах Android, но сообщество разработчиков потихоньку исправляет эту ситуацию. Из-за проблем с Android для написания комментов на мобильных телефонах мы показываем более простой редактор без Slate.

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

3) Не работают многие сочетания клавиш. Этому редактор просто не научили. Редактор вообще многому не научили.

4) Многие говорят, что они хотят fine-tune'ить html при постинге.

Мы можем сделать вставку/редактирование сырого html, но дальше Slate нормализиует этот html согласно своим внутренним правилам. Например, внутрь тега p (абзац) нельзя класть другие блоковые теги (например, h1), можно класть только инлайновые теги (a, b, i, s). Нельзя ставить инлайновые теги и текст, не обернутый в блоковый тег, на верхний уровень редактора и т.д.

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

Коротко: вы сможете вставить и поправить html (когда мы сделаем такую кнопку), но этот html будет обработан в соответствии с правилами использования тегов.

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

Давайте тестить и радоваться, товарищи!