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

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

Как я "написал" веб-версию Алиаса

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

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

Для "Алиаса" по сути чего-то особо сложного и ненужно: игра просто должна выводить слова на экран для ведущего, а его команда угадывает их. Но команды меняются и ведущие в командах тоже меняются - это первое условие. Время на объяснение нужно ограничить - это вторая деталь. Угаданные слова нужно считать и суммировать очки за них - три. Наконец, 20 очков и более - это победа. Кажется, всё просто, однако далее начинаются хитрые детали.

В базе нас должна быть возможность пропустить слово и перейти к следующему - тут я решил извратиться и сделать две кнопки, чтобы ведущий мог сразу отмечать верно ли угадано слово или пропустить его. Кроме того, логично, что у других игроков должна быть возможность не просто видеть историю слов, но и отмечать их "угадывание" в обратное направление - на случай если ведущий ошибся кнопкой или нарушил правила. Система при этом должна работать параллельно, поэтому над структурой базы данных для хранения пришлось подумать самостоятельно. Я решил использовать две основные таблицы: комнаты и история слов. В таблице комнат содержится основная информация - список участников, количество очков, статус. В словах - собственно, все слова за игровую сессию. Хранить их все до окончания игры (а не только за отдельный раунд) нужно ещё и для того, чтобы контролировать неповторяемость слов.

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

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

В итоге с перерывами на работу на создание работающего прототипа с большинством хотелок ушло около 3 дней. Результат вот он: https://alias.onlyfox.ru/alias.html

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