Недавно я написал заметку о забавной иллюстрации для оформления страницы 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 в своих заметках. Будет много интересного.

У нас в подъезде появился кот. Сидит третий день на лестничной площадке на десятом этаже. Мелкий, ему наверно где-то полгода. Отличный аппетит. Если покормить и погладить, то мурчит, как трактор.

Соседи в домовом чате спрашивают друг друга, чья потеряшка? Никто не сознаётся. На второй день общими усилиями выяснили, что этот кот жильцов, которые снимали у нас в подъезде квартиру. Теперь они съехали, а кота просто оставили. Есть шанс, что забыли. Хотя на третьи сутки-то точно забрали бы. Значит, специально оставили. Бывают такие люди.

Вчера ходили его кормить раза три. Натаскали ему мяса из супа. Он ест. Когда мясо в супе почти закончилось, стал есть супные же макароны, картошку и морковку ) Остальные соседи тоже подкармливают. Причитают в чате: как же теперь быть котику? А сами не забирают. Звонили в приют для животных. Там отказали, т. к. у самих места нет уже. Только попросили фотку для объявления. Вдруг заберет кто-нибудь.

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

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

А сейчас как? Гулять с ним я не буду. А одного на улицу не пущу. Страшно за него. На улице чего только нет. И машины, и дурные люди, и болезни всякие. И что, он будет всю жизнь жить в квартире? Говорят, надо кастрировать. Что за жизнь такая? Либо тебя кастрируют, либо собаки загрызут.

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

Ура, это случилось! Не думал, что успею. Символично получилось, что именно в последний день года я закончил доработку своего сайта. И запускаю на нём блог. Буду писать в него об интересных случаях, которые встречаются в моей работе. И вообще всякое о жизни.

Зачем всё это нужно? Для денег, естественно! За ушедший год рынок труда в IT заметно просел. Сейчас моя работа меня устраивает и даже нравится. Но на случай форс-мажора (стучу три раза по дереву), лучше подстраховаться заранее.

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

А если серьёзно, говорят, что среди программистов много интровертов. Вот и я такой же. Но даже самому отъявленному интроверту нужно иногда поделиться своим дивным внутренним миром. Я давно заметил, что у меня неплохо получается строчить заметки. Почему бы не выкладывать их? Это и будет моим окном для общения.

Теперь про техническую часть. Она интересная. Сайт работает на смеси двух движков. Wordpress и Эгея. Скрестил ежа с ужом. Ёж — это, конечно, Вордпресс. У него весьма обширная функциональность. Много разных функций, плагинов, кнопок. Как иголок у ежа. А уж, — это Эгея. У неё есть одна особенность: нельзя прятать посты под кат. Потому страницы длинные, как змея. Кстати, приходит как раз год змеи. Ещё одно символичное совпадение.

Получился такой гибрид очень просто. Сначала я решил делать блог на Вордпрессе. Стал делать под него тему оформления и запутался: чем здесь отличаются категории от тэгов? Показались невнятными объяснения о том, что категории — это общее, а теги — узкое.

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

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

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