Во время теста нового мобильного приложения для Такси 42 нашел неприятную особенность. Иногда не приходят оповещения о том, что автомобиль подъехал и ожидает. Это случается на слабых устройствах с небольшим количеством памяти. Если одновременно запустить что-то тяжелое, то из-за нехватки ресурсов Андроид «убивает» сервис, следящий за статусом заказа.

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

Я стал дебажить библиотеку Notifee, которую использую для фоновой работы с оповещениями. Пришлось залезть к ней «под капот» в нативный Java-код, хоть я и не особо силён в нём. Напомню, что я пишу на React Native.

Так вот, есть два режима, в которых можно стартовать сервис: START_STICKY и START_NOT_STICKY. В первом Андроид будет пытаться заново запустить его после принудительного завершения. А во втором — нет. Так вот, библиотека Notifee использует именно второй режим. И нет никакого способа повлиять на это через параметры или настройки.

Я встал перед дилеммой: форкать и модифицировать Notifee, либо вовсе от неё отказаться и переписать сервис на нативном модуле. Выбор пал на нативный модуль. Править чужой код не зная нюансов — такое себе занятие. Тем более, я за любой способ сделать приложение легче. А тут такая возможность избавиться от целой библиотеки. Заодно попрактикуюсь в написании кода на Java.

Я выкинул Notifee, переписал сервис и вернулся к тестам. START_STICKY помог, но не совсем. В особенно тяжелых случаях Андроид после рестарта сервиса тут же снова его «прибивал». На этот раз окончательно.

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

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

Словом, на сегодня проблема решена на половину. Приложение старается перезапустить сервис оповещений после «убийства». Это получается не всегда, поэтому по прежнему сохраняется опасность пропустить оповещение о подъехавшей машине. Хорошо, что оно дублируется звонком от робота.

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

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

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

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

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

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

А вот так выглядит заголовок, «отбитый» узором. Как и требовалось, он оживляет страницу. При этом он лёгкий и не мешает читать текст.

Добавил карту на сайт Такси 42. Речь пока только про десктоп. Раньше ввести адреса для заказа такси можно было только текстом. А теперь добавилась опция ткнуть их на карте. При этом, сайт тут же проложит маршрут.

Пока непонятно насколько удобно сделано переключение между адресами. Первый клик по карте назначает адрес «Откуда». Фокус переходит в поле «Куда», и все последующие клики по карте выбирают уже его. Чтобы вернуться к адресу «Откуда» нужно вручную перевести в него фокус.

Будем смотреть, удобен ли такой способ пользователям. У Яндекса, например, сделано по-другому. Там кликнуть на карте можно только адрес «Откуда». А адрес назначения вводится текстом.

Для работы с картой используется библиотека Leaflet и подложка 2ГИС. На очереди версия для мобильных устройств.

Расширил авторизацию на сайте Такси 42 при помощи JWT-токена. Раньше чтобы заказать такси приходилось каждый раз вводить номер телефона и подтверждать его через СМС-код. Теперь сайт научился запоминать пользователя. Если, конечно, тот поставил галочку «Сохранить вход» при авторизации.

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

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

Я заменил чекбоксы одной кнопкой «Пожелания к заказу». Она открывает диалог с выбором дополнительных опций. Форма стала гораздо лаконичнее. Можно набирать адреса и сразу же видеть, как меняется стоимость.

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

Продолжаю работу над сайтом мастерской по изготовлению манекенов для обучения технике кунг-фу. Такой манекен называется чонг. Изображение чонга используется на сайте как логотип. Я отрисовал его заново в 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 для поисковых роботов.