Допиливаем сайт своими руками

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

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

В основе лежит аддон Stylus. Он доступен и для Хрома и для Firefox (про другие браузеры не знаю). Он позволяет настраивать так называемые таблицы стилей, они же CSS. Именно CSS по большей части основа "лица" современных сайтов и за счёт правки стилей можно поменять очень многое: другой шрифт, другой цвет фона, ширина колонок, отступы и многое другое. При этом разметка CSS в целом достаточно простая и изучить её крайне просто.

Например, я хочу увеличить размер основной ленты. Нахожу в консоли разработчика браузера (кнопка F12) нужный мне элемент - FeedBlock и прописываю в специальном правиле для домена lispublica.ru переопределение класса:
.FeedBlock { width: 1500px; }

Сохраняю правило. Всё, теперь ширина основного блока - 1100 пикселей.

Для человека, который вообще не связан с Web дизайном, выглядит как урок "нарисуй лису", однако порог вхождения здесь довольно невысок. Всё, что нужно - это умение выявлять нужные элементы и править их. С первым помогает подсветка элементов во вкладке "инспектор" инструментов разработчика. Они доступны в браузере по умолчанию, а подсветка позволяет графически находить нужный элемент. Затем просто гуглим что означают все эти width, line-height и прочие padding и всё...

Однако, в некоторых случаях для достижения нужных результатов один лишь стиль поменять мало. Тогда в действие вступает тяжёлая артиллерия: Violentmonkey для Firefox и Tampermonkey для Chrome. Это менеджер пользовательских скриптов, который позволяет сделать гораздо больше, чем просто изменить внешний вид: в принципе, с помощью данного дополнения можно изменить логику поведения самого сайта. В теории, например, можно на некоторых сайтах отключить какой-нибудь ненужный функционал. В нашем случае Violentmonkey позволило мне изменить структуру блоков, чтобы переместить интерфейс оценки постов (только лишь через CSS нормально это не сделаешь). Опять же, всё локально.

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