Глобальное обновление сайта

Привет! У нас тут на сайте произошла небольшая революция, которая принесла адскую тучу новых штук, часть из которых — заметна, часть — нет. Если вам интересно, что именно и почему произошло, и вас не пугают технические детали — эта заметка для вас. Как обычно, принимаем советы, воспринимаем критику, хотим обратной связи.

Сайт стал удобнее

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

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

Проще читать

Начну с мелочей. Оформление стало проще — я вычистил всё лишнее, что нашёл, и я на этом не остановлюсь. Цвета стали приятнее, шрифт стал лучше, убрал архаичную боковую панель — вроде мелочи, а контрольная группа оценила. Так и оставил.

А теперь — не мелочь. Наконец-то, сайт стал нормально работать на мобильных устройствах. Будь у вас хоть яблофон, хоть андроидфон — вам будет удобно читать, смотреть и комментировать всё, что угодно.

Проще комментировать

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

Теперь рабочий процесс стал проще. Увидел интересную заметку — написал комментарий — отправил его. Я или Лена его увидим, отмодерируем — и после этого сайт вас запомнит и комментарий появится на сайте сразу после того, как вы его отправите.

Ах да, чуть не забыл. Теперь форма комментариев выглядит более адекватно, подгружается динамически и работает в любых браузерах. Давно пора.

Проще смотреть

Самое красивое, что есть на сайте — фотографии Лены. Проблема в том, что насладиться красотой было сложно, так как мне приходилось выбирать между плохим вариантом и очень плохим.

Плохой вариант — лайтбокс. Нажимаешь на фотографию — и она всплывает поверх всего. Нажимаешь на кнопки — фотографии проматываются. Нажимаешь на крестик — галерея закрывается. Что в этом плохого?

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

Очень плохой вариант — просто открывать фотографию по клику, либо в той же вкладке браузера, либо в соседней. Круто, конечно, вот только не удобно.

Я это починил. Теперь при клике на фотографию открывается галерея из уменьшенных кадров (но не слишком в ущерб качеству). Хочется полноразмер? Рядом с фотографией, аккурат в правом нижнем углу есть кнопка, welcome. И да, всё это нормально работает даже на телефонах.

Дисклеймер: некоторые старые галереи могут чудить. Какие-то фотографии в ранних записях будут открываться сразу во всю страницу. Обо всех этих багах я знаю и вскоре их починю.

Проще делиться

Ещё одна мелочь — у каждой публикации есть кнопки, которые позволят быстренько перепостить ссылку в соцсети, если захочется. Одноклассников и Вконтакте там нет, извините, а вот Твиттер и Фейсбук — есть. Роскошно, правда?

Сайт стал быстрее

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

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

Вместо Apache теперь трудится nginx, вместо mod_php — php-fpm, настроено более лучшее кэширование, всё это аккуратно сконфигурировано, приправлено улучшением дисковой и процессорной подсистемы, ну а в качестве вишенки на торте количество оперативной памяти я увеличил аж в два раза. В два раза, Карл Наташа!

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

Да, я знаю, что PHP — отстой, а выбор мастеров — это Ruby / Python / Erlang / Brainfuck. Да, я понимаю, что пришло время headless CMS. Да, я в курсе, что Ghost лучше, чем WordPress. Да, я осознаю, что Percona / MariaDB лучше, чем MySQL, а noSQL лучше всего вышеперечисленного.

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

Итоги

Сайт стал менее неудобным. Грузится — быстрее, читается — легче, комментируется — удобнее. Доступность на мобильных устройствах — почти хорошая.

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

И спасибо, что вы с нами!

Список дел

Кнопка «Ответить» и кнопка «Отправить» — кошмарно выглядит.

Дропдауны в Chrome тупят и тормозят (пока не вопроизвёл). Иногда после клика по кнопке читать менюшка не исчезает при потере фокуса. Win 10, Chrome 81.0.4044.122 (официальная сборка), 64 бит. Попробовать для этих линков джеесом отключить дефолт действие через привент дефаулт. возможно пофиксит проблему зависания.

Настойчивый автоперевод в виджете Яндекс.Переводчика.

Добавить лайки.

Пока грузит страницу — есть вариант с листалкой, а как догружает — пагинатор.

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

Поиск, ныкает весь сайт, и набираемый текст белым цветом на белом фоне.

Кнопку наверх, сделать плавающей абсолютом, ибо пока дабы вернуть сайт на верх надо листать аж в самый низ).

Слишком много места между футером и комментариями, тем более что при активации плагина он все равно делает размер блока под себя.

Хедер сделать фикседом, чтобы не проматывать снизу вверх обратно.

На странице поста ссылки «раньше» и «позже» при ховере имеют две границы.

Нет единообразия в цветах и границах кнопок («Поиск» и так далее).

Вадим

Вадим