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

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

Кольца на торце бревна не концентрические, т. к. оно не цельное, а склеено из нескольких толстых досок. Найти подходящее цельное бревно — сложная задача. Поэтому приходится клеить. Поверх текстуры дерева на торце видно выжженную печать мастера.

Вот часть макета главной страницы. Пока для только десктопа, но будет и адаптив. По-моему, получается неплохо. Фотка чонга здесь скучновата. Зато её солнечная гамма очень красива и идеально подходит по цвету.

На кнопке «Подробнее о чонге» тоже присутствует пиктограмма с изображением чонга сверху. На счёт неё я пока не уверен. Возможно, она лишняя.

Напомню, что я не настоящий дизайнер. По специальности я всё же разработчик. А художником я становлюсь на досуге для души. Осваиваю Фигму, Криту, Инкскейп. Думаю, что прогресс в этом деле у меня есть.

Взялся за редизайн сайта мастерской по изготовлению манекенов для обучения кунг-фу. На китайском такой манекен называют чонгом. Отсюда выбор домена.

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

Это, к стати, не единственная модель манекена. Есть ещё тренажёры на платформе в стальном стакане, подвесные на стену, «пауки» и т. д. Всё это может изготовить хозяин мастерской Дмитрий Васильевич Затуло.

С ним я знаком лично и, в своё время, много у него тренировался. Качество чонгов — отличное. Все конструкции из натурального дерева и стали, надёжные и проверенные временем.

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

Словом, я искренне надеюсь, что новый сайт понравится владельцу и поможет в продвижении мастерской.

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

Ничего не понятно, но очень интересно. Что значит страницы выросли? Если не количество страниц, то что? Количество просмотров? А ещё блог этот. Откуда он? Заказчик говорит, что никакого блога не добавлял. Вот и беспокоится. Может, кто-то хакнул сайт?

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

Ещё раз посмотрел на скрин. Семён Семёныч! Ну, конечно! Написано же: пересказ от нейрофильтра YaGPT. Значит, у меня на руках скрин пересказа, от нейросети. А не само письмо. Ох уж эти нейросети. Вечно что-то напутают или додумают.

Написал об этом заказчику. Попросил проверить само письмо. Есть ли там что-нибудь про блог? Заказчик тоже вздохнул с облегчением. Обещал проверить и ответить. Сегодня на вторые сутки ещё не ответил. Я делаю вывод, что всё там в порядке.

А ещё вывод, что не стоит полагаться на нейросети. Обязательно перепроверять их. Иначе можно стать седым раньше времени.

В среду утром проснулся, а интернета нет. Перезагрузил роутер — не помогло. Позвонил в Ростелеком. Тамошний робот безмятежным женским голосом сообщил, что о проблеме уже знают и делают всё возможное. К следующему утру обещают починить.

Я-то в курсе, что время они себе дают с запасом. И, скорее всего, починят раньше. Но всё равно без инета плохо. Я схватился за планшет. А там инет ещё с ночи отсутствует. Потому что угроза атаки БПЛА.

Что же, ладно. Пошел завтракать без инета. А потом ещё и поработал без инета. Без него я просто в Git ничего не могу выложить. А работать на домашнем полигоне мне никто не запрещает.

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

Вспомнилось детство. Придёшь из школы, пообедаешь и рыбок покормишь. А потом разложишь учебники, тетради и делаешь уроки. Отвлекающие моменты отсутствуют как класс. Ни телефона, ни, прости Господи, инета. Только тишина и сосредоточенность. Через это задачи делаются быстрее и осознаннее.

А задачи этим утром были простенькие. Например, сделал на таксишном сайте всплывающее предупреждение об использовании Cookie. Так требует закон о защите персональных данных. Пресловутый ФЗ 152. С тридцатого мая повышаются штрафы за его нарушение. Поэтому тема актуальная.

Вообще, я считаю, что такие всплывающие окна мешают просмотру контента. А потому являются злом. Я должен был бороться с этим злом. А пришлось примкнуть к нему. Потому что бизнес не хочет платить штрафы. И я его понимаю.

Так вот, сделал я всплывающее окно и проверил работу в разных браузерах. Везде работает. Кроме браузера Brave. В нём моё окно отсутствует. Как корова языком слизала.

Стал разбираться и вот, что выяснил. Контейнер со своим окном я обозвал cookieWarn. А Brave отказывается показывать блоки с подобными именами: cookieWarn, cookieAlert и т. д. Просто скрывает через CSS display: none.

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

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

Ближе к обеду пришла СМС об отбое угрозы воздушной атаки. А инет на планшете так и не появился. Я решил прогуляться до салона связи в ближайшем ТЦ. Там меня проконсультировала симпатичная девочка с пирсингом на нижней губе. Два металлических колечка были очень похожи на клыки. Я представил себе, какую боль ей пришлось терпеть. И даже поёжился. Может, там анестезию какую-то делают?

Так вот, оказалось, что нужно всего лишь... перезагрузить планшет. Мы перезагрузили, инет тут же появился. Вспомнилась ещё одна байка из универа. Что если у вас заглохла машина, то нужно выйти из неё и зайти снова. Как же я сам не сообразил? Ладно, в следующий раз соображу. Зато погулял и с девочкой пообщался )

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

Решили, что блок с данными заказа можно сворачивать под кнопку «О заказе». Если пользователю нужно посмотреть детализацию, он кликает кнопку, и блок разворачивается. По повторному клику блок можно свернуть обратно.

Я набрал в Гугле: js animate block height. Чтобы ознакомиться, так сказать, с best practices в этом впросе. Очень удивился, обнаружив, что выдачу Гугла теперь предваряют советы от ИИ. Возможно, это сделали уже давно, просто я не замечал.

С любопытством почитал, что предлагает нейросетка. Её предложение простое и напрашивается само собой. Высоту блока менять через Java Script. А анимацию сделать через свойство transition в CSS.

Отличное решение. Пользоваться им я, конечно, не буду. Ведь я не знаю заранее высоту блока. Заказ может быть длинным, а может быть коротким. Поэтому мне удобнее анимировать не просто высоту, а максимальную высоту.

Пусть в свёрнутом состоянии максимальная высота блока будет нулевой. Таким образом, он будет скрыт. А чтобы развернуть блок назначим ему высоту, которой заведомо хватит. Анимируем по прежнему через transition. Вот так:

.block {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;

  &_expanded {
    max-height: 300px;
  }
}

Чтобы развернуть блок нужно через JS назначить ему CSS-класс block_expanded. А чтобы свернуть — отнять этот класс.

Всё просто. Но есть и подводные камни. Если максимальную высоту сделать слишком большой, то анимация потеряет плавность. Поэтому подбирать её нужно с умом.

Собственно, задача простая. В контексте этой заметки мне больше интересно прониктовение ИИ в нашу жизнь. Теперь ещё и в выдаче Гугла. Будет особенно круто, если ИИ сам решил эту задачу. А не просто предложил самый частый выбор тех, кто гуглил до меня.

Хотя, по-настоящему хорошим решением было бы заранее подсчитать высоту блока. Потому что анимация через msx-height всё же получается дёрганная. Если бы ИИ предложил мне такую штуку, то это было бы хорошей помощью. Возможно, со временем научится.

Недавно я написал заметку о забавной иллюстрации для оформления страницы 404. Теперь поговорим о технической стороне.

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

Некоторые хостинг-провайдеры рекомендуют следующую конструкцию:

ErrorDocument 404 https://site.ru/404.html

Здесь site.ru — домен нашего предполагаемого сайта, а 404.html — страница для ошибки 404.

Я отмечу здесь одну важную деталь. Это будет работать как полноценный редирект. То есть для несуществующей страницы сайт ответит статусом 301 Moved Permanently. Соответственно, поисковые роботы будут считать, что страница на самом деле существует, просто перемещена по новому адресу. Понятное дело, такой ответ нам не нужен.

Чтобы отвадить роботов индексировать страницу 404 советуют настроить файл robots.txt. Нужно внести в него следующую строку:

Disallow: /404.html

Это рабочий вариант. Однако, как по мне, избыточно сложный. Открываем документацию к Апачу. Там сказано:

The syntax is,

ErrorDocument <3-digit-code> <action>
where the action can be,

• Text to be displayed. Wrap the text with quotes (").
• An external URL to redirect to.
• A local URL to redirect to.

То есть для ответа можно использовать:

1. Просто текст в кавычках, который отобразится пользователю.
2. Перенаправление на внешний URL
3. Перенаправление на локальный URL

Здесь внешним URL считается всё, что начинается с http или https, даже если находится на том же домене. И вот указание такого внешнего URL приведёт к фактическому перенаправлению со статусом 301. Это и происходит если использовать директиву с http.

А использование локального URL, начинающегося со слеша, не приводит как к таковому перенаправлению. В браузере отобразится указанная страница, а вот URL в адресной строке не поменяется. И статус ответа останется 404.

Вот так выглядит директива с локальным перенаправлением:

ErrorDocument 404 /404.html

Это гораздо удобнее. В этом варианте мы получаем нужный ответ сервера. И не нужно настраивать robots.txt для поисковых роботов.

Два дня назад было сухо и тепло. Девчонки ходили без шапок и в лёгких весенних курточках. Красота! Илья подумал: «Пора!» И поменял резину на летнюю. О, эта музыка для ушей! Когда машина едет совершенно неслышно и никого не пугает своими стальными шипами.

Кто-то там на верху посмотрел на всё это и снисходительно улыбнулся. Что, Илья, хочешь лета? Ну нельзя же быть таким нетерпеливым. И подсыпал снега. Ведь, чем дольше ждёшь тепла, тем приятнее, когда оно наступает. Всё для тебя, мой любимый человек!

Илья с утра смотрит в окно: кругом всё бело. Ехать никуда нельзя. Спасибо тебе, Вселенная, за твоё великолепное чувство юмора! И пошел пешком во двор фотографировать подснежники.

— Это не подснежники! Они как-то по-другому называются.
— Но это ведь цветы?
— Да.
— Они ведь под снегом.
— Ага.
— Значит подснежники!

А сам напевает про себя из Чайфа:

А у нас как всегда, всё не так, как в Париже!
Снегу в апреле выпало нам по колено!
Я готов доставать уже зачехленные лыжи,
И что странно, я сегодня в Париж не хочу совершенно!

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

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

Я стал разбираться, и оказалось, что это не баг, а фича. И не вёрстки, а Яндекс-Метрики.

Метрика собирает статистику по звонкам с сайта. На мобильных устройствах это просто: тапнул на номер телефона — позвонил. Звонок засчитался. А с десктопом сложнее, ведь с него нельзя позвонить. Посетители с десктопа смотрят номер на мониторе, а набирают его в смартфоне. Проблема.

Поэтому Яндекс использовал такой фокус: заблюрить часть номера. Чтобы посмотреть номер нужно провести по нему мышкой. Этот ховер мышки и засчитывается в статистку.

По мне решение весьма спорное. Когда я первый раз с этим столкнулся, мне было вовсе не очевидно, что тут надо водить мышкой. Я подумал, что это какая-то проблема с сайтом. И что из-за этой проблемы не получится узнать номер телефона.

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

Я написал небольшой скрипт, который скрывает часть номера телефона. Также как Яндекс Метрика. А поверх градиента рисует иконку с глазом. Намекает, что номер можно посмотреть если нажать на него.

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

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

Я вместо фокусов с градиентами просто экстраполировал бы статистику с мобильных на десктопы. Сейчас тенденция такова, что 80% посещений приходится на мобильные устройства. Так вот, можно умножить количество звонков с мобильных на 1,25 и получить приблизительно все звонки с сайта.

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

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

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

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

Например, недавно мне пришла в голову отличная метафора для иллюстрации на страницу 404. Эта страница специально для тех случаев, когда пользователь пытается перейти по несуществующему адресу. Я придумал нарисовать три сосны. Существует ведь такая поговорка: «Заблудиться в трёх соснах». Вот и моя картинка будет символизировать, что посетитель заблудился на сайте.

Здесь не нужен какой-то сложный рисунок в стиле реализма. Достаточно обозначить деревья контуром и добавить немного штриховки. Это мне вполне по силам. Чтобы смысл метафоры был понятнее, пусть сосны будут нарочито кривыми. Похожими на цифры 404. А ещё я добавил сову чтобы сделать рисунок интереснее. Она будет смотреть на посетителя и создавать атмосферу мрачности.

Скетч я нарисовал обычным карандашом на бумаге. А затем обвёл его пером на графическом планшете. Это Wacom One, который я недорого приобрёл на Авито специально на тот случай, если захочется порисовать. Удобный девайс. Спасибо продавцу Ирине за отличную сохранность.

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

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

Весь январь и целую половину февраля плотно занимался редизайном сайта Такси 42. Давно пора было сделать это. Сайт создан в 2016 году и ещё ни разу не обновлялся. Он сильно устарел и пользоваться им было неудобно. Он даже не был адаптивным. Для сайта с онлайн-заказом такси это губительно.

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

Во-первых, здесь очень много функционала. Например, можно заказать разные типы такси: легковое и грузовое. А ещё есть геолокация, адресные подсказки, дополнительные опции, заказ на время, расчёт стоимости и многое другое.

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

Особенно много хлопот доставила интеграция с ЮKassa. Оплачивать такси можно не только наличными, но и банковской картой. Спасибо ребятам, которые взяли на себя работу на стороне бэкенда: телефонию, формирование платежа, холдирование средств, возврат денег при отмене заказа и др.

Мне оставалось сделать удобную форму авторизации и совместить её с формой ввода платёжных данных от ЮKassa. Но и с этим пришлось порядком повозиться.

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

Конечно, не всё удалось сделать идеально. Много интересного функционала запланировано на будущее. Например, новые виды заказов: доставка, трансферы, буксировка и др. А ещё возможность заказа такси не только в Иваново, но и в других городах и регионах.

В общем, работы над сайтом ещё непаханое поле. Сейчас подключил метрику, смотрю вебвизор и логи чтобы оперативнее пофиксить возможные баги, если таковые обнаружатся. После первого дня работы полёт нормальный 🚀. А в будущем я надеюсь ещё часто возвращаться к сайту 🚕 Такси 42 в своих заметках. Будет много интересного.