Привет, флудеры.
Одно из моих хобби — посещение старых интернет-ресурсов. Да, я любитель таких мест, куда спустя много лет можно вернуться и почитать что писали люди 20-30 лет назад, какая была культура общения в Web 1.0, интернет-сленг того времени — что осталось в прошлом, а что, на удивление, дошло до наших дней.
Недавно, после шуточного обсуждения сюжета serial experiments Lain в комментариях к одному из артов на известном развлекательном сайте, я решил посетить и почитать ресурс, который до этого всё откладывал, но при попытке подключения, я обнаружил, что храм Ивакуры Лэйн был разрушен, а затем осквернен «подлыми» киберсквоттерами. И вместо порции ностальгии, я получил за щеку.
Речь, конечно же, идет о сайте lain.ru, который был зарегистрирован именно в этот день 24 апреля 2003 года и полноценно запущен 05 мая 2003. Сегодня ему бы исполнилось 23 года.
После более чем двадцати лет работы он незаметно прекратил своё существование 23 апреля 2025 года, а чуть позже домен за 30 тысяч рублей прибрали к рукам перекупы.
И знаете, совсем грустно стало. Никто даже не заметил, что мы потеряли кусочек прошлого. Но грусть нередко становится источником вдохновения. Грусть делает мысли глубже, усиливает чувствительность, создаёт внутреннее напряжение. Это наблюдали и психологи, и художники, и писатели. Один из естественных способов справиться с внутренним напряжением — дать выход эмоциям: через текст, рисунок, музыку или любое другое творчество. Для меня таким способом самовыражения стало создание сайта.
Я вдохновился. Поставил перед собой цель восстановить сайт, а также все материалы, до которых я смогу дотянуться. Не в духе-ли это самого сериала? Восстановить, по возможности, оригинальный контент, который был недоступен даже на настоящем сайте на его закате. А сам сайт сделать на современных технологиях, с удобными органами управления и механизмами потребления контента в современных браузерах, включая мобильные.
Оригинал был полностью создан Юрием #1313 своими руками на обычным html с «php скриптиками», поэтому и я старался делать всё самостоятельно, без громоздких фреймворков и вонючих движков типа WordPress. Памятник ранней аниме культуре, памятник молодому интернету.
Когда я рассказал свою идею друзьям, они почти единогласно приняли это с энтузиазмом и загорелись идеей помочь. У нас сформировалась небольшая команда и мы начали работу над сайтом в свободное время.
Сначала был создан HTML шаблон, к которому прикручены скрипты и таблицы стилей. На скриншоте ниже самое начало верстки шаблона. Тогда я даже не подозревал, с какой теплотой примут мой проект. Я еще даже не знал смогу ли я или брошу и уберу в стол.
Серверная сторона на node.js + express, в зависимости от запроса достает контент из БД и вставляет в ejs шаблон. Статика раздается nginx. Проект простенький, практически статичный. При первом запросе, сервер сформирует страничку из шаблона ejs, готовую к употреблению даже с NoScript. Если же скрипты включены, юзер получит этакий псевдо-SPA, динамическая подгрузка, нормальная галерея и прочие ништяки. Зачем нам SPA? Чтобы слушать музыку, но об этом позже.
Про разработку, верстку и прочее углубляться не буду, это не учебник по созданию сайта, да и не лучший пример. Просто на основе дизайна оригинального сайта с табличной версткой, был сверстан новый шаблон, а к нему серверная логика. Найдены исходники изображений интерфейса (почти все они были из артбука OIW) и из них сделан ремейк текстур в большом разрешении для дисплеев с высоким уровнем DPI.
С текстурами интерфейса у меня возникли неожиданные проблемы, и да - я знаю, что на новых картинках я нигде не попал в цвета, но по моему мнению, автор (образца 2003 года) слишком выкручивал контрастность и терял детали (делайте скидку, что это всё это добро было предназначено для ЭЛТ мониторов). Я решил не крутить так радикально контрастность, но все же немного отсекать темные цвета и приглушить насыщенность в моем варианте. ИМХО, так они лучше подходят как темной, так и светлой теме. Время ограничено и переживать о вкусовщине нет времени. Нужно двигаться дальше и заниматься действительно важными вещами, а кому цвета оригинала важны, то об этом чуть позже ;)
Честно говоря, я всегда обожал дизайн lain.ru за его левое меню, но без классического эффекта горизонтальных полосочек оно будет «уже не то», и я потратил очень много времени, чтобы этот эффект выглядел «pixel perfect» на любых разрешениях и масштабах. При обычном масштабе, идеальная красивая SVG сеточка превращается в кашу и выглядит некрасиво. Скрипт пытается выровнять полосочки по реальным пикселям на устройстве. По devicePixelRatio определяет минимальный видимый шаг (1/dpr) и размер тайла в физических пикселях. Если сильно любопытно, на сервере есть не сжатые версии скриптов (кроме Fancybox), просто уберите «.min» из url.
Когда работал ночью, понял, что нужна темная тема. Обязательно. С реализацией проблем нет, а вот цвета подбирал-подбирал. И до сих пор подбираю, но уже почти нравится.
Мобильная версия — это просто скукоживание шаблона через css медиа запросы для ширины экрана меньше определенного размера, всем давно известные и широко используемые. На мобильной версии гамбургерное меню скрыто и открывается по клику, есть плавающее меню снизу экрана. Плеер себя немного по другому ведёт. В общем, обычное поведение, как у большинства сайтов.
Favicon воссоздал по образцу оригинального сайта, но в высоком разрешении, а из полученного png сгенерировал набор иконок через сайт realfavicongenerator.net, который отлично справился с своей задачей.
С контентом мне помогали мои друзья, настоящие герои и ценители искусства, хоть и не все из них были фанаты Лэйн. =)
Они же тестировали работу сайта в меру своих возможностей. После пробного старта 4 апреля к нам заглянул NightVampire, главный модератор аниме раздела JoyReactor и нашел ещё несколько косяков, дал несколько советов. Работа все еще продолжается, но уже преимущественно «под капотом».
Для новой версии сайта написал веб плеер. Простенький, но достаточно мощный для нашей задачи. Тут всё как у всех: плей, пауза, повтор, рандом, альбомы, обложки (ручная работа), очередь воспроизведения и прочее.
Работает даже на экране блокировки.
Старый сайт проектировался под IE6, где предполагалось отличное от современных браузеров поведение при клике на картинку (и на музыку, если позволял интернет — можно слушать мп3 сразу в медиа плеере потоком). В галерее на ХР открывалось окошко с картинкой, которое удобно закрыть. К тому же, оно не мешает переключаться между страницами и не создает новых окон, а меняет картинку в открывшемся окне (target у автора был прописан правильно). Но эта модель совершенно не работает на современных браузерах, а тем более мобильных. Тут велосипед решил не изобретать, потому что мой любимый Fancybox работает отлично и покрывает 100% хотелок от галереи из коробки.
По архивам интернет-знакомых, веб-архиву, торрентам по сайту и различным сообществам были восстановлены почти все материалы с сайта, которые не были доступны даже на самом lain.ru под конец его существования. Многие вещи разбросаны по всему интернету и могут быть найдены по названиям файлов среди кучи 404. Хотелось как можно больше настоящих файлов с lain.ru из веб-архива, но очевидно некоторые файлы были недоступны ни на одном из снимков. Подбирал аналоги таких материалов, чтобы опыт использования моего сайта был таким, каким задумал #1313
Так были восстановлены артбуки, аудиофайлы, архивы и коменты.
Ближе к концу нулевых автор, вероятно, охладел к своему детищу и при переездах между хостингами постоянно терялось то одно, то другое. В какой-то момент он удалял годноту с сайта ради места на форуме (смешные по современным меркам 300мб), в другой момент потерял все комменты и, как мне показалось, php скрипты на сайте заменил на статичный бекап со своего диска. Был момент, что потерялся целый форум! А бекап форума зашифровала его корпоративная система, когда он вставил внешний диск в рабочий ноутбук.
Новостей на сайте было не так много, я их собрал вручную. Их было совсем мало, по сравнению с комментариями.
О комментариях. Многие застали сайт уже без них, но Web Archive позволил вытянуть исторические записи пользователей с 2003 года. Комментарии на сайте работали до конца декабря 2011 г.
Комменты были для меня очень важны. Благодаря ним стало понятно, почему же автор не дописал 13-й слой! Предлагаю найти самостоятельно. Подсказка: слой 12 =)
Собрать базу старых комментов из веб архива нам поможет самодельный грабер на пользовательских скриптах. Я использую Tampermonkey, внутри крутится скрипт, который выводит кнопку «Скачать» и при клике тупо сканирует DOM и парсит комментарии, после чего выводит превью на новой вкладке и качает .json файл.
Мы будем листать все страницы и получать комменты в 2 режимах:
Первый способ — листаем страницы comments.php со «всеми комментариями» и выуживаем имя, email, коммент и ссылку на какой странице оставлен коммент (например wp.php). Прошел таким способом несколько раз по разным уровням пагинации за разное время.
Второй способ — прочесать все известные php страницы сайта (очень удобно, потому что ниже статьи сайт отображал все коменты без пагинации, а на веб-архиве удачно найдены снимки почти всех страниц за месяц до пропажи комментариев с сайта.
То есть я заходил на каждую страницу в веб-архиве и качал json файлик с комментами, которые скрипту удалось спарсить. А потом объединил кучу файликов в один, отсекая дубликаты. Тут всё просто, нужно только считать хэш ДАТА+ИМЯ и отсекать дубли, следовательно мы не получим повторы.
...думал я, но не тут то было. Верстка текста коментов на сайте постоянно плавала (именно самого текста, верстка блока комментариев, к счастью, не менялась). Дата на сайте показывалась как получится, менялась в зависимости от летнего/зимнего времени и это немного попило мне крови. Написал программку-помощник и за вечер вручную отобрал из дублей уникальные комменты. На автоматику не хотелось перекладывать отсечение дублей, потому-что я к тому моменту уже перестал доверять своей «автоматике», а также хотелось контролировать самый актуальный вариант комментария. Дело в том, что у некоторых комментариев есть ответ автора, но парсер может подтянуть из comments.php старый вариант коммента, на который автор сайта ещё не ответил. Решил просто разобрать это вручную, чем изобретать велосипед.
Это был последний коммент на сайте х)
Был еще баг, когда комментарий начинался с ссылки, парсер ловил её, а не ссылку на страницу. Заметил поздно, проблемой не стало. Проще стало эти 15 штучек вручную поправить, чем заморачиваться с кодом и потом снова сканировать тормозной веб-архив.
Что по адресу сайта? Как я писал выше, домен оказался у перекупов. И судя по заглушке, хотят они нехило, цены варьируются от 100 тысяч рублей до 30 миллионов рублей, а ru-домен в 4 символа с историей дешево они не отдадут. Я бы обязательно купил его во имя искусства, но очевидно не могу. Да и домен, наверняка, будет премиум и платить за него у меня нет возможности. А моя цель восстановить и сохранить сайт для всех желающих, даже если их немного, но не обременять себя финансово и не клянчить донаты. После бурного обсуждения с командой, хорошим выбором показался lainru.org и сайт функционирует с этим доменом. Вдохновением послужил сайт Масяни, который переехал с mult.ru на multru.com, только мы выбрали org как серьезные ребята >:)
Тем не менее, движок обрабатывает ссылки точно как на старом сайте и lainru.org/layers.php откроет ту же страницу, что была на lain.ru/layers.php. Да, node.js обрабатывает ссылки *.php, я больной ублюдок.
Если когда-то я смогу получить старый домен (или кто-то его перехватит или купит и направит на IP сервера, вы хоть предупредите =)), то все старые ссылки из разных вики, форумов и сайтов оживут и будут снова вести на статьи, которые подразумевал запостивший ссылку.
«Здорово!» — скажете вы. — Но нам совсем не нравится новый дизайн, гигантизм, адаптивная верстка, темная тема, новомодная галерея, mp3 плеер с плейлистами, https и несовместимость со старым браузером на моей ретро-машине [привет, Anykey.]. Оригинальные дизайн и верстка ведь тоже важны для такого проекта по сохранению культурного наследия! Я полностью согласен! Надеюсь, что обрадую вас, потому что я предусмотрел старый дизайн на сайте. Вы можете перейти на old.lainru.org и увидеть оригинальную табличную вёрстку. Сервер отдает эту страничку без обязательного редиректа на https, так что сайт будет работать даже в IE6 – проверено! =)
Что случилось Юрием - автором lain.ru? Точно не знаю, мне не удалось связаться с ним. Надеюсь, что ему просто надоело держать проект и с Юрой все хорошо. Причины так считать есть, потому что его личный сайт-песочница n1313.ru всё еще работает и у него есть недавние коммиты на GitHub. Так что, предполагаю, всё в порядке. Спасибо ему за всё.
Нужно сказать, что этот проект отнял достаточно много сил, но я не жалею ни одной потраченной минуты и бессонной ночи. Я даже не до конца могу передать словами, как это ощущалось. В какой-то момент появилось странное, тёплое чувство, будто прикасаюсь к чему-то из начала тысячелетия. К тому времени, когда аниме в наших странах только начинало находить своих фанатов, когда диски нарезали и передавали из рук в руки, когда контент искали буквально по крупицам, а сайты и проекты делались «на коленке», но с огромной любовью простыми ребятами, такими как вы и я. И в процессе работы я поймал себя на мысли, будто стою рядом с теми ребятами из прошлого. Словно продолжаю их путь, продолжаем то, что они начали. Словно из-под пальцев рождается что-то живое — неидеальное, но настоящее. Такое, что, возможно, не каждый современный разработчик сразу поймёт... но точно почувствуете вы, друзья.
Для меня, как и для всей нашей команды, было большой честью восстановить и запустить этот сайт для всех желающих. И я очень рад, что мы получаем такой живой и искренний отклик от вас всех!
Для вас старались:
Jam — идея, движок, верстка и прочая мелочь;
opossum — наполнение страниц, оптимизация под новый и старый дизайн;
cyberShprott, kretin01, squarecircle — вынюхивали и структурировали медиа-контент со мной;
DubodelovA — менеджер на минималках (с канбаном!), техническая карта сайта, SEO-вайбкодер xD
Большая благодарность:
r0wax — фокус группа из одного человека (хехе);
NightVampire — тестирование, советы, ссылка на аниме-реакторе;
h8myself — за вдохновение и теплые слова;
mutronics и всей команде lain.in.net — за ссылку на нас на форуме, за работу над самим форумом и соц. сетями;
Synthetic Dreams — за бережно собранную коллекцию контента по serial experiments Lain
Что будет дальше? Я продолжу работу над сайтом и по мере возможностей буду добавлять или дополнять контент и функционал. Например, благодаря пользователю с ником Numina, мы добавили в артбук https://lainru.org/vel.php 47-ю страницу, пусть это и просто фотография. А вы знали, что этот артбук сканировал сам автор, а по интернету в 99% случаев гуляют именно его сканы? Ага, без 47-й страницы =)
Из ближайших планов дописать актуальные сведения по ремейку игры PSX на соответствующей странице. Во-вторых, на данный момент доступны для просмотра только исторические комменты, публикация новых отключена, но обязательно будет в будущем, как и остальные запланированные улучшения. Правда, уже не такими бурными темпами, иначе здоровье у меня закончится. Но проект будет живым и актуальным, а не просто покрытый пылью архив.
На этом, вроде, всё. Благодарю всех за внимание, и спасибо вам за интерес, за обратную связь и просто слова поддержки.
С днем рождения, lain.ru