[C.O.R.E.] 12 лет в Сети (страница 1)

Предыстория

Начну издалека. Осенью прошлого года я окончательно устал от созерцания статей и переводов десятилетней давности, убивавших нервные клетки кривизной слога, казавшегося тогда вполне нормальным. У всех бывает. Но, в отличие от холсто- и бумагомарателей, изменить мы это в состоянии — было бы желание. А оно появилось, и началась «реставрация» — длящаяся и по сей день.

В начале декабря 2021 года, незадолго до прошлого дня рождения C.O.R.E., мне в голову пришла замечательная, а главное поразительно своевременная мысль: нет смысла заниматься тем, что никто не увидит. В последующие месяцы я понял и ещё одно: нельзя, как это любят рекомендовать поисковики, просто «делать сайт для людей» — этого мало. Нужна реклама, нужно SEO — в общем, чтобы всё это видели.

С этой целью я начал осваивать микроразметку Schema.org, попутно внедряя её на сайте. Тогда ещё не понимая, что типы и их значения можно прописывать в метатеги страницы, я добавлял их в начало статей: автор, источник, переводчик, количество слов и тому подобное — так появилась та самая перегруженная информацией шапка, которую вы сейчас видите под заголовочной картинкой на ПК.

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

Рывок-прорыв

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

Старое C.O.R.E.

Следующие несколько дней C.O.R.E. неслабо лихорадило. Предстояло многое изменить, а мне для этого, прямо скажем, знаний не хватало. Поскольку ни веб-дизайнера, ни денег на него под рукой не было, пришлось ударными темпами подтягивать знания HTML и CSS, немедленно реализовывая их методом проб и ошибок. В результате каждую минуту что-то отваливалось, улетало в неведомые дали, возвращалось обратно, блоки меняли положение и размеры, страницы рассыпались и восставали из праха, но за эти дни я узнал о вёрстке больше, чем за предыдущие 12 лет. И это было только начало.

Новое C.O.R.E.

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

Разумеется, на этом я не успокоился.

Десигн

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

В «настольной» версии сайта не сразу, но появился слайдер. Он был и в прошлом дизайне C.O.R.E., но обновлялся вручную, и процесс этот был весьма муторным, поэтому содержание не менялось месяцами. Теперь он построен на базе информера, отображающего новые авторские статьи — последние появляются на нём автоматически. Остальные статьи отображаются прямо под ним, и лишь затем идут новости — так я расставил акценты. Поскольку слайдер занимает много места, подгружает тяжёлые скрипты и картинки, я убрал его из мобильной версии сайта.

Шапка, навигация, похожие материалы.

Боковая колонка в обновлённом C.O.R.E. переехала слева направо и значительно изменилась. Её состав во многом зависит от контекста — а именно текущего раздела сайта. В самом общем случае в ней отображается поисковая строка, случайная статья, сообщения на форуме, цитата и ожидаемые RPG. Блок с последними появился совсем недавно, зародившись в таблице Google, которую тоже начали вести в этом году. Ожидаемые RPG отсортированы по дате выхода, ссылки ведут в соответствующие темы на форуме, где можно почитать подробнее. В какой-то момент ссылки дополнились указанием жанра.

В статейном разделе и галерее в боковой колонке находится навигация по категориям. На страницах статей (и новостей) присутствует блок «Похожие статьи (новости)», предлагающий почитать другие материалы, подбираемые по схожести тегов. Это было и раньше, но с редизайном функция обрела второе дыхание. Переехав из конца статей (новостей) в боковую колонку, она преобразилась из скучного списка заголовков в полноценную подборку с обложками и краткими описаниями/вступлениями.

«Ожидаемое» в боковой колонке.

И на обломках старо-коре напишут наши имена

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

Логическая цепочка следующая: хорошо, вот у нас теперь адаптивный дизайн на HTML5, только картинки нифига не адаптивные. Пока у сайта была лишь версия для ПК, всё было нормально. Ну, как... превьюшек у картинок отродясь не было, а при загрузке страниц подгружались не уменьшенные копии, а сразу полноразмерные изображения, даже если это пачка PNG на сотни мегабайт. Радости мобильных пользователей не было предела, тем паче — давно ориентирующихся на них поисковиков.

Копание в этом направлении привело к череде удивительных открытий вроде атрибута srcset у тега img и целого мира асинхронной загрузки всего и вся. Но главный вопрос на тот момент: «А что у нас современного и свободного в форматах изображений?» По Сети только-только начал расползаться WEBP 10-летней давности, поддержку которого внедрил в свои последние ОС локомотив всея прогресса компания Apple. Конкуренцию ему составляли передовые AVIF и JPEG XL. Последний казался перспективнее, но, похоже, умер, поскольку после долгих мытарств Google отказалась от его поддержки в будущих версиях Chrome. А значит в ходе долгих экспериментов с форматами решение было принято верно.

Энивей, задача казалась до безобразия простой: скачать картинки со всего сайта, преобразовать в нужные форматы, залить обратно, сделать автозамену расширений по базе данных. ЧТО МОЖЕТ ПОЙТИ НЕ ТАК? Всё.

Задача и была бы простой, сработай всё как положено. Годами на C.O.R.E. использовалась следующая схема размещения файлов: «Год/месяц/число/директория/файл». Четвёртый уровень вложенности, что не очень оптимально с точки зрения SEO, но кого это волновало до текущего года... Файлы скачали, преобразовали в пары AVIF + WEBP, старые удалили, чтобы освободить место под новые и... Оказалось, что автоматически по FTP четыре уровня вложенности не поддерживаются. Максимум два. Вернуть всё как было можно лишь перезалив все файлы вручную через админ-панель.

Решив, что 1) не стоит наступать на эти грабли снова, 2) попутно оптимизировать SEO, от идеи тупо перезалить всё вручную (пересоздав все директории тоже) отказались. В результате на всём сайте сдохли все картинки, покрыв его тысячами ошибок 404. В рамках реставрации статей картинки перезаливаются, но процесс идёт медленно. К этому мы ещё вернёмся.

Почему AVIF + WEBP? AVIF не поддерживается устройствами Apple (не знаю, как в сторонних браузерах, но Safari не отображает точно), браузерами старше двух лет (простите, фанаты Windows XP), а также Microsoft Edge (верность традициям), при этом перед WEBP у него ровно два преимущества: 1) выше степень сжатия, 2) он современнее. Can I Use утверждает, что доля поддержки AVIF современными браузерами составляет почти 80% против 95% у WEBP. Это решение можно смело рассматривать как сомнительное, но я решил пойти по пути прогресса и удобства 80% против 20% ретроградов. Последним можно было показывать превьюшки в WEBP или даже JPEG (чтобы уж наверняка) при помощи тега picture, однако 1) это третий набор картинок, для которых нет места (а у меня — денег оплачивать его расширение), 2) picture «замедляет» рендеринг страницы браузером, усложняя её структуру. Почему не полностью AVIF? Потому что ни одна поисковая система, в том числе и продвигающий формат Google, не поддерживает его индексацию, чего не скажешь о WEBP. Отказываться от выдачи по картинкам было бы глупо.

Итогом вышеперечисленного стало то, что по умолчанию при загрузке страницы отображается быстрый и маленький AVIF, при щелчке подгружается жирный полноразмерный WEBP. Всё это заполировано отложенной загрузкой и асинхронным рендерингом, благодаря чему страницы загружаются быстро, трафик на мобильных телефонах почти не расходуется даже на статьях с огромным количеством изображений (десятки и сотни). Картинки завёрнуты в микроразметку ImageObject с названиями и описаниями для поисковых систем, прописаны атрибуты alt (коих раньше не было — SEO-самоубийство в плане выдачи по картинкам в поисковой системе).

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

Но и это ещё не всё. Переводя один из первых дневников разработки Underrail: Infusion, я восхитился красивыми, подсвечивающимися при наведении указателя мыши рамками у картинок на сайте Стига. Захотел такие же. Залез в исходный код страницы и открыл магию CSS-фильтров. В результате после недельных экспериментов картинки на C.O.R.E. обзавелись «голубенькими» (цвета основного текста) рамочкой и «подсветкой», цвет которых меняется на зелёный (цвет ссылки) при наведении указателя мыши. В довершение всего при наведении указателя мыши немного увеличивается яркость и контрастность картинки, что визуально делает её «сочнее».

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

Стены текста

Кто бы что ни говорил, а C.O.R.E. уже лет пять как специализируется на статьях или, как модно сейчас говорить, «лонгридах» — тех самых, по которым страдают все, но не читает никто. К счастью, нас это не останавливает.

Если взглянуть на типичную статью сверху вниз, то первой в глаза бросится «шапка», а точнее «выходные данные» под картинкой-обложкой. Их немало: автор, переводчик, редакторы, дата публикации, количество слов, время чтения, аудитория, уровень читателя, количество просмотров. Большая часть этой информации появилась при редизайне. Вычисляя скорость чтения, мы берём за основу весьма оптимистичный прогноз в 250 слов в минуту (тесты показывают, что большинство людей читает заметно медленнее). Указание аудитории стало ответом на многочисленные возмущения о сложности (и необходимости) восприятия материалов, адресованных прежде всего разработчикам. Уровень читателя появился в ответ на тот же запрос, но с противоположной направленностью: если в предыдущем случае теоретический читатель возмущался сложности материалов, то в этот раз другие читатели считали некоторые материалы излишне банальными. Таким образом, из разделили на адресованные фанатам жанра и разработчикам, причём первые дополнительно поделены на субъективные категории: начинающий, опытный, продвинутый. Под «опытным» подразумевается ещё и интересующийся материалами для расширения кругозора, «продвинутый» — готовый серьёзно напрячь мозг, либо заставший описанные в статье времена, о которых не помнит даже Аллах.

Если взглянуть чуточку дальше, взгляд (вероятно) наткнётся на один или два раскрывающихся списка, обычно озаглавленных как «Оглавление цикла» и/или «Содержание статьи». Первый служит для навигации по нескольким частям одной статьи или статьям одного цикла, второй — для перехода к определённой части открытого материала. Год назад всего этого не было.

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

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

Куда сложнее, неприятнее, но и полезнее оказалось другое нововведение — нумерация абзацев. Оно открывает новые возможности не только читателю, но и редакторам — а именно сослаться не просто на страницу с десятками тысяч слов, не на раздел/главу объёмом чуть меньше, а на конкретный абзац, где говорится именно то, что вы хотите показать. Отныне при обновлении старых статей мы могли ссылаться не просто на уже опубликованные материалы, но на конкретные абзацы, подтверждающие конкретные тезисы. Кроме того, нумерация абзацев позволяет запомнить место, где вы остановились, и продолжить чтение позже. А ещё со временем мы пришли к пониманию необходимости сквозной нумерации частей одного цикла/материала, поэтому переход из поисковой системы к материалу, начинающемуся с абзаца 237 наводит на определённые мысли...

Неразрывные пробелы в Brackets.

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

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

Ещё одно заметное нововведение — оригинальный текст цитат. Визуально оформленный как цитата перевод теперь дополнен оригинальным текстом, чтобы вам не пришлось лезть в источник, дабы свериться. Достаточно ткнуть в надпись «Оригинал цитаты».

Оригинал цитаты.

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

Красная рамка.

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

Ну, и в какой-то момент в конце статей появился зелёный треугольник — опять же, наследие печатных изданий (впрочем, изредка встречается и в Интернете) — символизирующий «жирную точку», конец материала. Изначально он ставился в конце материала, но впоследствии обрёл новый смысл. Теперь он ставится в конце цикла (то есть в серии из четырёх материалов в первых трёх его не будет), подчёркивая окончательное завершение, финальный аккорд.

Микроразметка в Brackets.

И, наконец, то, о чём я упомянул в самом начале: реставрация статей. Всё было бы намного проще и быстрее, если бы речь шла лишь о восстановлении умерших картинок. Но процесс намного сложнее: заполняются данные в шапке, текст вычитывается и правится, картинки перезаливаются и переоформляются, наносится семантическая разметка, в том числе и задротская микроразметка по типу VideoGame из Schema.org, когда в тексте выделяют характеристики персонажей, локации, игровые предметы и так далее — вы этого не видите, но поисковая машина видит всё. Добавляются ссылки на абзацы и главы статей, а также навигация. К цитатам добавляются оригинальные тексты (и многие безвременно почившие ресурсы приходится искать на Archive.org). Всё это заново типографируется. В результате на переделку «готовой» статьи в обновлённый, удовлетворяющий меня вариант иногда уходят десятки часов.

Микроразметка в валидаторе.

Наполнение

Уходящий год запомнится каким-то запредельным количеством новых статей — во многом благодаря многочисленным переносам с других ресурсов (с разрешения авторов, разумеется). Переводов было немало, а наш магистр критических обзоров ukdouble1 тоже не сидел без дела, помимо нескольких обзоров дописавший свой магнум опус «Говноеды поневоле».

Из пепла восстала и галерея, от которой в тяжёлые времена абсолютного безденежья пришлось временно избавиться. Она получила всё положенное и упомянутое, в том числе микроразметку страниц Gallery, ImageObject для картинок, обновлённые лайтбоксы и подписи. Со временем мы заменим/перезальём скриншоты версиями без водяных знаков (лого C.O.R.E.) в более высоком разрешении (вероятно, в 4k). Этот процесс уже идёт.

В новостную ленту вернулись полные тексты. Раньше в ней находилась лишь «подводка» с предложением перейти на форум и уже там прочитать полностью — теперь же содержится полный текст, который дублируется на форум. Таким образом, больше нет нужды делать лишние телодвижения, да и Google крайне доволен.

И, вероятно, последнее: перенос видео непосредственно на C.O.R.E. В отличие от многих перечисленных выше, эта идея не снизошла озарением на больную голову, а зрела годами. Дабы понять, что не так с Youtube, достаточно пройтись по старым темам и материалам, и даже не десятилетней давности, а 2-3-летней, и подивиться количеству передохших видосов. Именно по этой причине возродился из пепла канал C.O.R.E. на Youtube — я перезаливал туда видео, чтобы хранить их у себя... что, конечно, не совсем так, и несколько правообладателей, в числе которых оказались и малоизвестные инди-студии из полутора землекопов, успели возмутиться моей наглости. Да и в целом ситуация с популярнейшим в мире хостингом в России остаётся весьма нестабильной, и в любой момент в дополнение к картинкам могут передохнуть и сотни вставленных с Youtube видео. Исходя из этих соображений, я решил сохранять видео на сайте и проигрывать с него же при помощи Video.js. Кроме того, собственные видео заворачиваются в микроразметку VideoObject. Всё это долго, муторно, зато надёжно и устраняет зависимость от внешних факторов.

Трейлер в Video.js.

Принципы

Они не менялись: максимально качественное наполнение, свобода и анонимность.

В этом году было особенно забавно наблюдать, как размещавшие рекламу казино и букмекеров внезапно вспомнили о совести и завели разговоры об этичности, попутно ваяя страницы на Boosty. У нас, к счастью, «мерзкие и неэтичные» рекламодатели не отваливались по причине того, что их никогда и не было. Впрочем, страница на Boosty всё же есть. И ещё в ВК.

У нас по-прежнему не установлено никаких счётчиков статистики, будь то от поисковых систем (например, «Яндекс.Метрика», Google Analytics) или кого-то ещё. Этим мы, конечно, подкладываем свинью своему SEO, но отсутствие слежки за пользователями важнее. Конкретно в этом году мы пошли ещё дальше: убрали отслеживание пользователей онлайн и все указания на это из макета сайта. Вы не увидите, кто и где сейчас находится. Впрочем, как и мы. К внешним (а иногда и внутренним) ссылкам добавляется атрибут rel="noopener noreferrer nofollow«, говорящий браузеру не сообщать целевому сайту, откуда именно вы пришли — на случай, если вам стыдно заходить на C.O.R.E. и вы занимаетесь этим тайком. А если серьёзно — чтобы вам не пихали тематическую рекламу ожидаемых миллиардами игроков «лучших RPG текущего года» с сисястыми барышнями, прочитав в переданной браузером информации, что вы пришли с сайта про RPG.

Кроме того, раньше со мной периодически связывались люди, просившие разрешения на публикацию на других ресурсах. О свободном распространении материалов C.O.R.E. уже добрый десяток лет было написано на отдельной странице, но теперь нет никакой необходимости её искать: об этом написано в конце каждого материала (если автор не выразил принципиального несогласия). Там же есть ссылка на полный текст лицензии.

И, наконец, более-менее победив нашествие ботов (и понаставив эпичнейших костылей), мы реализовали возможность анонимного комментирования. Свобода и анонимность, да.

Почему C.O.R.E.?

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

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

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