Удобная форма обратной связи

🔴 Каждый инпут и кнопка должны «реагировать» на курсор. Если нет нарисованного состояния, то подойдет любое небольшое изменение: затемнение, осветление или добавление прозрачности. Главное показать пользователю, что можно кликать.

🔴 По наведению на все интерактивные элементы курсор обязательно должен превратиться в «руку» – cursor:pointer;

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

🔴 Для телефона должна быть маска ввода. Причем нужно учитывать ввод начинающийся с +7 или 8. Все плагины автоматически подставляют +7, а следом добавляют 8-ку. И при быстром заполнении теряется последняя цифра номера, это нужно обрабатывать и 8 менять на +7. Продажник не будет звонить на 10 разных номеров, чтобы найти правильный номер телефона.

🔴 Не нужно пихать в один инпут ввод «e-mail или телефон». Это нельзя стопроцентно обработать и на лету поменять формат маски ввода – слишком разные значения.

🔴 На время отправки формы, нужно «заморозить» кнопку «Отправить», пока от бекенда не пришел ответ. Чтобы не было дублей отправок.

🔴 Бекенду нужно всегда корректно ответить – все ок или случилась ошибка. А на фронте принять ответ и обработать его.

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

🟡 Размер шрифта в полях должен быть не меньше 16 пикселей на телефоне, чтобы на айфоне не активировался встроенный зум всей страницы, который ломает верстку.

🟡 Если в форме есть обязательные чекбоксы, и юристы не запрещают, то они должны быть по умолчанию выбраны. Чтобы не мучать пользователя лишней валидацией.

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

#Мысли

Парсинг json-а

Кусочек коммита, которого хватит на пост. Из-за невнимательности или спешки, разработчик сам себе трудностей придумал и героически их преодолел. В блоке «1» со скрина, принимается ответ от api и обрабатывается. Апи отдает данные в json, которые лежат во вложенном массиве $texts['texts']. Но этот вложенный массив потерялся и при декодировании джейсона, получается строка, а не объект. Ну а дальше уже начались костыли для извлечения нужного куска данных из всей строчки.

🔴 Не правильное обращение к данным(жирным выделил потерянный кусок):
$texts = json_decode($texts['texts'], true);
Да же если перепутать и получить какое-то месево в ответе от апи, то это повод задуматься, возможно проблема в апи – ее стоит подправить, если она часть проекта. Или получше посмотреть документацию и примеры, если api от стороннего сервиса. Ни один адекватный сервис не пришлет набор данных одной строкой, которую нужно парсить регулярками.

🔴 По коде не понятно про пункт 2 со скрина. Но тут логика проверки даты на вхождение в интервал дат прошлой недели. Скрипт будет запускаться по понедельникам и делать проверку за прошлую неделю. Сейчас в коде проверка происходит от текущего времени и на 7 дней назад. Это неправильно, поскольку скрипт запускается позже и уже есть промах в пол дня. А есть запуск скрипта перенести на пару дней вперед, то промах станет еще больше. Нужно сравнивать конкретные даты – от понедельника до понедельника.
В Laravel есть пакет Carbon, он хорошо работает с датами и несколькими методами можно определить, попадает проверяемая дата в прошлую неделю или нет. Примерно такой код получится:

$result_bool = Carbon::parse('проверяемая_дата')
    ->startOfWeek(Carbon::MONDAY)
    ->isSameWeek(Carbon::parse('last week')->startOfWeek(Carbon::MONDAY))

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

🔴 И пункт 3 бонусом: хардкод. Вписан конкретный id в условие.

#КодРевью

Критическая уязвимость 1С-Битрикс

❗️13 сентября 2023 нашли новую серьезную «дыру» в 1С-Битрикс: Управление сайтом. Уязвимость позволяет подсунуть свои команды на сервер, а дальше уже можно делать что угодно.
Проблемный код находится в модуле «Сайты 24», который редко используется, но по умолчанию включен во всех редакциях Битрикса, начиная с самой простой – «Старт».

Битрикс уже на следующий день(14 сентября) выпустил обновления, которые закрывают уязвимость и рекомендует обновиться немедленно. Официальный сайт с описанием обновления: ссылка.

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

📌 Уязвимость в модуле «Сайты 24» – это конструктор страниц. Я не видел ни одного сайта, где бы этот функционал использовался. Поэтому рекомендую просто удалить модуль. При чем отключение и удаление модуля через админку не защищает от уязвимости – проверили. Для полного закрытия «дыры» нужно отключить модуль в админке и удалить всю папку этого модуля. Папка находится тут: /bitrix/modules/landing/. Нужно удалять директорию landing и все вложенные в нее файлы и папки.

❗️Если у кого-то есть дополнительная информация по этой теме, вопросы, нужна консультация или помощь в устранении – пишите мне в личку: Евгений Ипатов.

#БазаЗнаний

Дебаг Telegram-бота с webView

📖 На одном проекте – телеграм-боте с веб-вью(mini app), стали приходить жалобы, что не всегда получается оформить заказ: бот с каталогом, корзиной и онлайн-оплатой. Пытались отловить ошибку, про которую сообщали покупатели, но повторить не получалось. На всех устройствах, что имелись в наличии, бот работает без сбоев. А в серверных логах ошибок нет, скрипты не падают.

В вебвью бота нет нормальной консоли для отладки, а работая с вьюхой через браузер, не получается полностью имитировать mini app телеграма. Чтобы хоть немного сузить круг подозреваемых и подсмотреть за действиями пользователей, в веб-вью добавили яндекс метрику с вебвизором. За день насобирали записей, посмотрели – ничего криминального, фронт не сытится. Но заметили, что у нескольких пользователей не появляются товары в корзине, хотя явно кликали по кнопке добавления в каталоге. Пошли опять тыкать бота, сделали все тоже самое, что и пользователи – ошибка не ловится. Но у пользователей точно есть проблема.

📌 Для понимания масштабов бедствия и полного логирования всех событий в боте, добавили еще целей метрики на каждую кнопку в веб-вью. А на бекенде каждую api обернули тремя логами:
– в начале выполнения, когда пришел запрос. Сохраняем все данные
– в обработчике ошибок
– в конце выполнения api перед тем, как отдать результат
Логи пишутся в MongoDB, каждый тип в свою коллекцию.
В итоге имеем 4 метрики на каждое действие: на фронте клик пользователя ловится целями яндекс метрки, а на бекенде три события сохраняются в логи: начало и конец выполнения, возможные ошибки.

После сбора логов, пошли смотреть – количество стартов апи и кликов по кнопкам совпадает, значит с фронта отправляется все запросы на бекенд. А вот количество стартов и завершений апих отличаются.
Дальше дело техники: найти в логах старта апи данные, которые не доходят с фронта или приходят не валидные, добавить проверки в коде и готово.

После починки, логи и цели метрики убирать не стали, пригодится для мониторинга работы бота.

#Кейсы

JS-плагин для кастомизации курсора

📖 Иногда на проектах нужно вывести совсем не стандартный курсор мыши и заложенных в браузер вариантов отображения не хватает. Стилями можно заменить cursor на картинку, но поддерживаются не все форматы. Кроссбраузерно работают только png изображения. Большинство браузеров поддерживают svg, но не все. А те, что поддерживают не всегда корректно отображают векторные элементы внутри svg – бьются тонкие линии. Gif-ки совсем не работает в курсорах при подстановки их через CSS. Это сильно связывает руки, поэтому такой способ не всегда подходит и приходится дорабатывать с помощью JS: двигать картинку вслед за курсором, а сам курсор в это время делать невидимым. Логика не сложная, но есть нюансы, которые нужно обрабатывать.

Столкнувшись в очередной раз с подобной задачей, собрали и оформили решение в js-плагин. Так удобней дорабатывать и переиспользовать код. А чтобы не жадничать, плагин выложили в открытый репозиторий и упаковали в npm пакет, вдруг кому-то еще пригодится.

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

📌 Ссылки:
– Пакет в npmjs: ссылка
– Документация: ссылка
– Открытый репозиторий: ссылка

#НашиРазработки

Настройка VPN через WireGuard

📖 В последнее время VPN стал ходовым инструментом. Можно найти бесплатные конфиги, которые работают через непонятные сервера, или купить доступ с более скоростным каналом. А можно настроить свой сервер, чтобы иметь над ним полный контроль. Проблема только найти и оплатить заграничный сервер. Но недавно наткнулся на хостера, который принимает оплату русскими картами и предоставляет виртуальные сервера, размещенные в Европе. Для экспериментов купил VPS в Голландии. Не дорогой, 5 евро в месяц всего, но и по мощности слабоват. Что-то серьезное на нем будет сложно запустить, а вот для VPN самый раз. Если кому-то нужен этот хостинг – пишите мне в ЛС или в комменты к посту, чтобы не было рекламы)

Сервис продает и VPN сразу, но так не интересно – не наш путь. Самому разобраться и настроить сервер увлекательней. Настройка не сложная, если использовать заготовки и установщики. Для создания тоннелей можно использовать много разных приложений, но для кроссплатформенной работы идеально подходит WireGuard – это бесплатное и опенсорсное ПО.

📌 Для настройки сервера и дальнейшего упрощения работы по генерации новых пользователей VPN есть удобный bash-скрипт, который сам все настраивает. Репозиторий со скриптом и документацией по нему: тут.
Все, что нужно сделать на сервере, это скачать скрипт и запустить его. Дальше все настройки происходят в режиме «далее-далее».
Скачиваем скрипт на сервер:
curl -O https://raw.githubusercontent.com/angristan/wireguard-install/master/wireguard-install.sh
Даем скрипту права на выполнение:
chmod +x wireguard-install.sh
Запускаем скрипт:
./wireguard-install.sh
И все. Сервер настроен.

📌 Теперь для создания нового пользователя, достаточно вызывать команду в папке со скриптом:
./wireguard-install.sh add user
После создания пользователя достаточно скачать конфиг и добавить его в приложение WireGuard. Приложение есть и под мобилки, для них конфиг генерится в формате qr-кода.

❗️ На VPS ресурсов еще хватает, 20-ю профилями VPN готов поделиться.

#БазаЗнаний

Фикс фикса или ревью коммитов

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

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

📌 Чтобы пофиксить такие фиксы, из можно схлопнуть все семь коммитов в один с помощью rebase и уже один коммит отправить в репозиторий. Тогда история изменений будет не такой длинной и станет более понятной.
По шагам:
1. Смотрим историю коммитов: git log
2. Определяем, что нужно схлопнуть последние 7 штук
3. Запускаем rebase на последние 7 коммитов: git rebase -i HEAD~7
4. Появится список всех коммитов. Выбираем(pick) первый и «клеим» к нему все остальные через squash
5. Далее нужно написать название коммиту. По умолчанию в название попадаются имена всех схлопнутых коммитов
6. Остается только запушить в репозиторий. Но из-за расхождений в количестве коммитов, пуш не пройдет. Нужно его отправлять «силой»: git push –force

#КодРевью

ChatGPT – инструмент разработки

📖 С января стали пробовать в работе ноу-хау ChatGPT. Сперва относились к нейронке, как игрушке, потом как к магии, а сейчас это один из инструментов разработки. ChatGPT частенько выручает ответами и заменяет Google или Stack Overflow.
Инструмент интересный, но пользоваться им нужно, как и любым другим, включая голову. Бездумно копировать ответы – это плохой вариант. Но если спросить, уточнить, и обработать результат «руками», то получается хороший результат.

📌 Хочу поделиться основными запросами, с которыми обращаемся к ChatGPT:

1. Составление и «дешифрация» регулярок. Регулярные выражения тяжело читаются и не просто пишутся. Если нет заготовки, то можно долго провозиться при ее написании. Нейронка с таким справляется на ура.

2. Поиск по документациями малоизвестных инструментов, классов, модулей и плагинов. Иногда даже не понятно, откуда нейросеть берет ответы – описание может не быть в официальном мануале, никакие примеры не гуглятся. А ответы и пояснения ChatGPT работают. Чудеса. Но нейронка тоже не всесильна, иногда и она не знает ответа и начинает сама выдумывать, нужно аккуратно с ней обращаться, все ответы перепроверять.

3. Иногда ChatGPT заменяет гугл. В редакторах кода есть плагины, которые встраивают чат. И бывает, чтобы не выходить из редактора, быстрее спросить нейросеть. На простые вопросы по синтаксису ответ почти всегда верный.

4. Когда случается «затуп» и не понятно, как упростить или оптимизировать кусок кода. Идей нет, но есть ощущение, что стоит отрефакторить написанное. Можно спросить нейроку, иногда советы полезные или просто наталкивают на нужные мысли.

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

❗️Интересно, как вы используете ChatGPT и используете ли вы ее вообще. Если есть чем поделиться, то пишите в комментарии, буду признателен советам, предложениям или вопросам.

#Мысли

Code review простой авторизации

На скрине небольшой кусочек кода с базовой авторизацией. Хороший пример, ничего лишнего – код читается и есть что разобрать.

🔴 Основная проблема тут в хранении пароля, он обрабатывается в открытом виде. Так пароли хранить нельзя, он должны быть зашифрованы. И кодирование должно быть такое, чтобы обратно раскодировать было невозможно. Для этих целей есть много готовых модулей и классов. Например, для nodejs, используется пакет bcrypt. Но можно и самим реализовать простое шифрование – взять хеш от строки (пароль + «соль»). Самый простой хеш высчитывается алгоритмом MD5. Такие хеши уже известны для большинства самых популярных паролей и методом перебора можно устроить дешифрацию, если кодировать пароль в первозданном значении. Но если к паролю добавить, только нам известную, «соль» – набор символов, то расшифровать получившийся хеш уже сложнее.
То есть корректная реализация хранения пароля подразумевает следующий алгоритм:
1. При регистрации:
– получаем пароль,
– добавляем к паролю соль,
– берем хеш от получившейся строки и записываем в базу данных.
2. При авторизации
– получаем пароль,
– клеим к нему соль,
– берем хеш и сверяем значение с тем, что хранится в базе данных.

🟡 Второй момент по коду – оптимизация и упрощение логики. Можно убрать условие проверки пароля у найденного по логину пользователя(строки 17-19 на скрине). Вместо этого условия, лучше доработать запрос к базе данных(строка 11 на скрине). Чтобы поиск в БД происходил не только по логину, но и по хешу пароля. Тогда если найдется запись, то это будет означать, что совпали логин и пароль пользователя – можно авторизовывать.

#КодРевью

Шутки за 300 – сайт, который работал на кеше

В конце 2014 году был пик популярности шутки про «скажи 300». Я в то время уже 4 года отработал фулстеком в вебе, дорос до старшего разработчика в местной веб-студии. Но мне было 25 лет – еще шальной и молодой, и я очень любил приколы, граничащие с идиотизмом. Такие шуточки и сейчас заставляют посмеяться, но теперь мозгов хватает не упоминать их при каждом удобном случае.

Так вот, прикол про 300 мне тогда на столько понравился, что я решил сделать отдельную страницу с вопросом «Сколько будет 150+150», при ответе на который, выдавалась в рифму рандомная специальность: тракториста, программиста, машиниста и тд. Первая версия еще жива, ее можно посмотреть: ссылка. Страница быстро разлетелась по друзьям, а в голову стали приходить идеи доработок сайта – генерация демотиваторов, мемов, безысходности и еще с десяток страниц. Позже на сайте появилась лента мемов, которую я пополнял руками каждый день.

Спустя года 3, знакомый дизайнер нарисовал макет для редизайна. В то время у меня была своя студия по разработке и в свободное от заказов время, сверстали редизайн и переписали бекенд сайта. Шел 2017 год, коллекция мемов на сайте приближалась к 7-8 тыс., а посещаемость 9-10 тыс. человек в день. Следом росла и нагрузка. Чтобы ее снизить и увеличить скорость сайта, решили добавить кеширование всех запросов к БД. Кеш сделали долгоживущим, а к оптимизации подошли ответственно – закешировали вообще все запросы.

В 2018 году на хостинге случилась авария – упал MySql, и пролежал несколько часов. Упали и все сайты, соседствующие с «Шутками за 300», но сам проект с мемами даже не заметил проблем, поскольку каждая страница тянулась из кеша.

В 2019 году я продал сайт, не было времени им заниматься. А в 2020-м новый владелец забросил проект. Сейчас открыл сайт, а там все картинки битые: ссылка 🫤
Проектом я занимался в свободное время, на протяжении почти 5 лет, вспоминаю его всегда с улыбкой. А история с полным кешем проекта, часто вспоминается, когда где-то падает mySql.

#Юмор

Черный список DDoS Guard

📖 Наверняка вы встречали сайты, перед входом на которые, появляется синий щит с текстом «Проверка браузера перед переходом на сайт имя-сайта». Эту плашку иногда показывает сервис защиты от DDoS-атак. Весь трафик проходит фильтрацию и уже потом проксируется на конечный сервер.
Сервисом защиты не приходилось пользоваться, но вот с серверами, которые им прикрываются от DDoS-атак, недавно познакомились. На одном проекте перестала работать одна из служб доставки. Пошли смотреть, а все запросы к сервису возвращаются с ошибкой. На тестовом стенде все в порядке, запросы проходят. А вот с боевого – рабочего сайта, ни в какую не удается достучаться до апих, в ответ всегда ошибка доступа.

По сообщению ошибки ничего не понятно, и самое интересное, что тот же код без проблем работает на тестовом сайте. Позвонили в поддержку. Оказывается, сервера защищенны от DDoS-атак и IP-адрес рабочего сайта попал в черный список DDoS Guard. Но лишних или компрометирующих запросов никогда не было с боевого сайта, в логах чисто.

📌 Сайт заказчика располагается на крупном хостинге и имеет vip-тариф, то есть скомпрометировать ip-адрес сложно. Хостинг сайт присматривает за лишней активностью на своих серверах, тем более с вип-тарифами. Или нет? Пошли смотреть, какие еще сайты висят на нашем ip-шнике. Таких оказалось 378 штук (скрин проверки приложил). Не мало. Написали в поддержку сервиса доставки и разбанить наш IP, получили отказ. Написали в поддержку хостинга и попросили сменить нам IP – получили отказ. Печально. Чтобы не менять хостинг, купили выделенный ip у хостера. Настроили смену адреса, но запросы все равно не проходят, хотя домен пингуется новым ip. Оказывается, хостинг меняет только внешний IP, а весь исходящий трафик так и идет по старому адресу. И чтобы окончательно сменить ip сайту пришлось принудительно указывать сетевой интерфейс в запросах. Пример для curl на php: curl_setopt($ch, CURLOPT_INTERFACE, "выделенный-ip-адрес");

#Кейсы

Модуль 1С-Битрикс для копирования настроек инфоблоков между админами

📖 В админке 1С-Битрикса есть возможность управлять отображением списков записей и страниц с самими записями. Кроме того, что можно создавать поля под записи, их можно отображать или прятать в каждом инфоблоке. Если проводить аналогии, то инфоблок в Битриксе – это таблица базы данных, а поле инфоблока соответствует полю в таблице. При создании новых сущностей, создаются новые инфоблоки и уже к ним добавляются свойства – поля. Эти настройки выполняются «руками» в админке. И кроме имен, типов данных, связей и тд, для полей устанавливаются права доступа и статус отображения в админке.

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

📌 Несколько раз случались ситуации, что забывали обновить отображение полей и заказчик приходил с вопросами «А что вы сделали? У меня ничего не появилось». Неудобно получается. Чтобы не попадать в такие дурные ситуации и упростить себе жизнь – не обновлять каждое поле в каждом инфоблоке по отдельности, написали модуль, который выполняет эти действия сам и в массовом режиме: не по одному полю, а сразу для всей сущности(инфоблока).

❗️Модуль выложили в открытый доступ, возможно, кому-то еще будет полезен. Решение опубликовано в открытом репозитории и в официальном плеймаркете Битрикс, где его можно бесплатно скачать и установить себе в админке:
— Маркетплейс Битрикса: ссылка,
— Репозиторий: ссылка.

#НашиРазработки

Быстрый экспорт Google Sheets в PDF-файл

📖 У Google-овых документов и таблиц есть удобная фича, которая позволяет сохранять документы в PDF формате. А таблицы еще и в csv или xlsx. Экспорт доступен по http-запросу, то есть достаточно открыть урл в браузере и запустится скачивание файла.
А раз это доступно по http-запросу, то и скриптом можно «поймать» файл и сохранить к себе на сервер. Это может быть полезно, для автоматической генерации или сохранения документов.

📌 Для наглядности:
Ссылка на таблицу: посмотреть.
Ссылка, которую достаточно открыть в браузере и таблица сохранится в формате PDF: попробовать.

Чтобы запустить экспорт, достаточно поменять урл документа или таблицы с «/edit» на «/export» и передать набор параметров для уточнения формата, размера листа и тд.
Основные параметры расшифрую в коде комментариями, так понятнее всего должно быть.

📌 Код получения PDF из таблицы

// id листа
$id_sheet = 198804480;
// id таблицы
$id_spreadsheets = "13zUBxrBSh7-D6E-tFD46tZOwu71DlsfnCGLRVJHS2fY";
// формат
$format = "pdf";
// начать со строки, отсчет от 0
$row_start = 0;
// закончить строкой
$row_finish = 7;
// начать со столбца, отсчет от 0
$start_column = 0;
// закончить на столбце
$finish_column = 3;
// размер листа, от 0 до 10, 7 - лист А4
$size = 7;

$host_google = "https://docs.google.com/spreadsheets/d/";
$all_params = [
  $host_google, // ссылка на гугл документы
  $id_spreadsheets, // id нашей таблицы
  "/export?format=", $format, // формат выгрузки: pdf, csv, xlsx
  "&size=", $size, // размер листа, от 0 до 10, 7 - лист А4
  "&gid=", $id_sheet, // id листа в таблице
  "&r1=", $row_start, // начать со строки
  "&r2=", $row_finish, // закончить строкой
  "&c1=", $start_column, // начать со столбца
  "&c2=", $finish_column // закончить на столбце
];
// склеиваем в полный урл
$url = implode('', $all_params);

$filename = "google_test.pdf";

// получаем файл
$file = file_get_contents($url);
// сохраняем
file_put_contents($filename, $file);

#БазаЗнаний

Имена свойств и переменных

📖 С пылу с жару код, из сегодняшнего проекта. Небольшой кусочек, но пример хорошо демонстрирует проблему использования разных стилей написания переменных. Без преувеличения, разработчик минут 15 потратил, пока разобрался, почему сообщение в бота отправляется без форматирования.

На скрине два кусочка кода. Сверху вызов метода, а внизу сам метод. Функция sendMessage делает запрос к api telegram для отправки сообщения пользователю через бота. Бот умеет писать сообщения обычным текстом, либо отформатированным с помощью html или markdown. Для установки режима форматирования нужно передать не обязательное свойство parse_mode. Если его не отправлять или передать не корректное значение, то телеграм считает, что режим форматирования отключен и шлет сообщение пользователю простым текстом.

📌 В коде со скрина, метод принимает параметр parseMode и передает его api telegram в свойстве parse_mode. Получается разное написание одного и того же смыслового значения. Это сильно путает, особенно когда рядом есть свойство chat_id, написанное в стиле snake_case. Если не подсмотреть функцию sendMessage для отправки сообщения, то на автомате можно написать код, который будет отправлять свойство parse_mode, хотя функция ждет parseMode.

Такая путаница часто приводит к ошибкам при доработках и добавляет сложности в чтении кода. Так же нужно использовать какой-то один стиль написания переменных, а не скакать с camelCase на snake_case и обратно.

#КодРевью

Структура репозитория

❗️ На скрине структура веток репозитория, которой сейчас пользуемся. Интересно мнения, советы и ваш опыт почитать в комментариях. Одна голова хорошо, а несколько – лучше. Ведь нет предела совершенству и всегда что-то можно улучшать, а живой и проверенный опыт полезней, чем сухой справочный материал.

📖 Предисловие, для понимая объема задач и количества участников на наших проектах.
Обычно параллельно работают 2-4 специалиста. Это не стандарт, есть исключения, когда один справляется или наоборот 5-7 человек работают над разными задачами. Под такой тип проектов сама по себе сформировалось и постоянно эволюционирует структура репозитория. Дни релизов не регламентируются, все задачи разные и объем со сроками тоже везде свой – апаемся по готовности.

📌 Описание веток репозитория со скрина:
– Master – основная ветка кода, которая развернута на рабочем сервере. В нее заливается проверенный и отлаженный код из ветки dev или hot_fix_N.
– Dev – копия мастера, развернута на тестовом сайте. Принимает готовые задачи из веток task_N, перепроверяется и мержится в master.
– Ветки task_N – ветка, которая создана из dev, в каждой _N ведется работа над отдельной задачей. После выполнения задачи, тестируется и отлаживается на тестовом сайте. По готовности заливается в dev.
– Ветки hot_fix_N создаются на пару часов, если на рабочем сайте случилась авария и нужно оперативно починить боевой. Вносятся фиксы, проверяется на тестовом сервере, потом мержится в мастера и закрывается. После такого мержа, dev актуализируется – стягиваются изменения из мастера.

📌 Важные моменты:
– Если ветка task_N живет долго, то периодически в нее подтягиваются актуальные изменения из dev
– При слиянии готовых задач с dev, мерж происходит через rebase, чтобы вся логика задачи была собрана в кучу, а не разбросана по коммитам.
– При мерже hot_fix_N с мастером также используется rebase
– По завершению задачи, ветка закрывается
– Номер в имени ветки – это номер задачи в таскменеджере

❗️Жду ваших комментарием.

#Мысли

Проверка undefined на бекенде

📖 В старом куске кода одного проекта на php откопал интересное условие, пока рядом проверял новую логику. Не сразу понял в чем дело, поскольку перед этим в коде другого проекта на nodejs логику смотрел.
В php нет типа данных undefined, для php это строка. А тут в коде, который на скрине, пхпшный бекенд принимает запрос с фронта и первым же делом проверяет параметр на undefined. Когда посмотрел фронтовый кусок, все стало понятно. Параметры запроса от фронта, тоже на скрине – нижняя часть.
В пользовательском интерфейсе заливаются картинки с разбивкой по альбомам. Но альбом не обязательно выбирать, если сделать заливку без привязки к альбому, то он автоматически должен создаваться с названием текущей даты. И чтобы не обрабатывать такие случаи, на фронте всегда отправляется выбранный альбом. Соответственно, если альбом не выбран, там будет undefined. Отсюда и берет начало бекендовское условие с undefined.

📌 Код работает, но что не так:

🔴 Появление на фронте undefined – это уже проблема. Такие значения не должны уходить на бекенд и вообще как-то участвовать в логике. Нужны проверки существования данных

🔴 Бекенд не должен обрабатывать «кривые» данные в своих условиях. Должна быть валидация всего того, что приходит с фронта. И если формат не корректный, то нужно ответить фронту ошибкой

🔴 Бекенд обрабатывает undefined так, будто это флаг, обозначающий, что альбом не выбран и нужно создать новый. Это создает путаницу и вводит в заблуждение, поскольку undefined – неопределенное значение, это не false, не пустая строка и не null.

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

#КодРевью

Трудный первый рабочий день

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

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

🤯 Во второй половине дня этот товарищ резко подскочил и ушел. Открываю телеграм – он удалился из чата разработчиков, а меня забанил. Звоню, а он сбрасывает.
Только через пару дней отвел на вопрос в чем дело, когда написали ему с другого аккаунта в телеграм. Объяснил свой уход тем, что случились семейные проблемы и нужно срочно уехать далеко и на долго.
А еще через 2 дня заметили, что в вики, были доступы и к боевому сайту. Стажер, перепутав сайты, удалил с рабочего сайта один блок во вьюхе. Проект под контролем версий, восстановили все быстро.

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

#Юмор

Мониторинг температуры и CO2 в офисе

📖 В начале 2022 года купили в офис датчик для измерения CO2(углекислого газа) и температуры. Покупали, чтобы следить за уровнем CO2 и не забывать вовремя проветривать помещение, а то после превышения нормы концентрации, начинается сонливость, а при серьезном превышении – голова становится «чугунная», а у некоторых и вовсе начинает болеть. Соответственно все сонные, продуктивность и настроение падает. А с датчиком хотя бы немного можно контролировать атмосферу в помещении и реагировать при высоких показаниях – проветривать офис.

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

Ну а дальше уже дело техники. Притащили в офис микрокомпьютер orange pi, накатили на него ubuntu, подключили к интернету, нашли и собрали драйвера под прием сигнала по usb от датчика MT8057. Написали скрипт на python, который каждые 10 минут опрашивает датчик, получает показания температуры и CO2, и отправляются данные на сервер, где они записываются в MongoDB.

Для вывода полученных значений, собрали простенький веб-интерфейс, где строиться график за сутки и за все время. Но на страницу все равно нужно заходить и смотреть. А этим постоянно не будет никто заниматься. И тогда чтобы не забывать про показания, добавили уведомлялки в ботов. Сперва в битрикс24, бот слал показания каждый час в отдельный чат со всеми сотрудниками. А потом и в телеграм перенесли бота – на скрине к посту, пример его сообщений.

#Кейсы

PDF-принтер для сайтов

📖 На одном из проектов столкнулись с проблемой, что нужно генерировать много pdf файлов на основе кучи данных. Причем визуальная часть файла очень критична, она должна повторять отображение страницы сервиса, но с небольшими изменениями. Проблема не столько в обработке данных, сколько в повторении визуальной части страницы, которая постоянно дорабатывается и меняется. А все библиотеки генерации pdf под php, основываются на своей разметке, которая прилично отличается от браузерной. То есть при каждом изменении страниц сервиса, нужно дорабатывать и верстку под pdf-файлы. Это двойная работа.

Самый простой вариант – это печатать страницу в pdf с помощью браузера. Можно добавлять в стили media-запросы print, которыми можно спрятать лишние элементы и внести нужные корректировки для блоков. Так получится одна верстка – только фронтовая и при доработках, не нужно вносить изменения в верстку под pdf на сервере. Но js-ом нельзя вызвать печать страницы браузером без промежуточных браузерных экранов. И такой вариант клиента не устраивал, должно быть минимум действий, чтобы генерировалось и скачивалась pdf в один клик.

📌 Тогда и появился этот скрипт, которым сегодня делюсь. На Python написали скрипт для запуска Selenium WebDriver, он в свою очередь запускает виртуальный Chrome, где открывается нужная страница и автоматически запускается печать в pdf. Selenium используется для автоматизации действий в браузере, для автотестов. Но и для нашего случая хорошо подошел. Все это дело крутится на отдельном сервере: принимает урл страницы, запускает браузер, сохраняет страницу в pdf и отправляет обратно.
Такое решение чуть медленнее, чем серверная генерация, но это осмысленное решение, чтобы минимизировать трудозатраты и ускорить разработку.

❗️Если у кого-то есть подобные или похожие проблемы, то выкладываю скрипты нашего pdf-принтера. Код сыроват и есть проблемы при печати некоторых страницы, но в целом рабочий:
Репозиторий: ссылка.
Инструкция по эксплуатации в readme репозитория хранится.

#НашиРазработки

Http-запрос по расписанию с помощью cron

📖 На бекенде в фоне часто «крутятся» скрипты, которые выполняются по расписанию. Чтобы ими управлять, чаще всего используется планировщик задач cron на unix системах. Этот демон по расписанию запускает серверные скрипты. Но иногда нужно запустить скрипт по http-запросу. Причины такого запуска разные, например, необходимо вызвать скрипт на другом хосте. Cron не может сам обратиться к скриптам по урлу, в таких случаях используется программа wget, для работы с файлами по сети, она шлет http запросы на любой адрес и пытается получить ответ. Можно комбинировать планировщик cron и запрос через wget.

Пример такого вызова:

1 2 * * * wget -O /dev/null 'https://example.ru/script.php'

-O /dev/null – указывает, что отправляем в никуда содержимое из ответа скрипта, нужен только http-запрос.

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

Все работало исправно какое-то время, но количество товаров увеличивалось и время выполнения скрипта росло. И в какой-то момент начали сыпаться ошибки в логи. Сходу не сообразили в чем дело, но логи показывали, что скрипт отрабатывал по несколько раз за ночь и каждый раз падал. С падением разобрались быстро – лимиты выполнения скриптов срабатывали. А вот с дублями срабатываний пришлось повозиться. Оказалось, что по умолчанию, если wget не дожидается корректного ответа, то он дублирует свой запрос, и так 20 раз. И к тому же лимит ожидания ответа также не бесконечный, по дефолту он 900 сек(15мин).

📌 Чтобы это исправить, нужно добавить параметры вызова: wget --tries=1 --timeout=0. Тогда wget не делает дубли и работает без лимита ожидания ответа. То есть запрос становится вот таким:

1 2 * * * wget --tries=1 --timeout=0 -O /dev/null 'https://example.ru/script.php'

#БазаЗнаний

Ревью двух строк кода

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

На скрине две строки – это метод api, который принимает с фронта данные, делает запись в базу данных и отвечает обратно на фронт, что все ОК (200) и передает объект со значениями которые должны записаться в БД. Тут ключевое слово – «должны». Должны не значит «записались».

📌 В коде не хватает проверки, действительно ли в БД сделана запись. Примерно вот так должно быть:

// проверяем факт записи в БД
if($group->save()){
  // ответ фронту, что все ОК
  return $this->sendResponse($group);
}
// ответ фронту с ошибкой
// делаем пометку в логах
// шлем себе алерты и тд.

❗️ Нельзя быть 100% уверенным даже в элементарных действиях. Если что-то может сломаться, оно обязательно сломается. Даже если все параметры всегда приходят с фронта идеальные (не бывает такого), а код покрыт всеми возможными тестами, перепроверен много раз и исправно работает уже не первый год. Всегда что-то может пойти не так, как пример, тут может на какое-то короткое время перестать отвечать база данных. Вполне реальная ситуация. Но такие глобальные проблемы встречаются куда реже, чем кривые данные и их обработка. Если сегодня код работает хорошо, а сам метод небольшой и полностью понятный, то спустя несколько итераций доработок, он может обрасти дополнительными условиями, обработками и вычислениями. А ответ фронту останется таким же самоуверенным – без проверок.

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

#КодРевью