Реклама от провайдера – первая встреча
Вспомнил историю, которая приключилась в 2018 году, она как раз в тему недавнего поста про установку SSL-сертификатов: пост тут.
Но я опять перегнул палку, получился не короткий пост-заметка, а статья на 7 тыс символов. Лимит телеграма 2 тыс символов на пост с картинкой или 4 тыс без нее.
Поэтому выкладываю полный пост на VC, вот ссылка: читать всю историю.
📖 Кусочек для затравки:
Решили выловить отображение рекламы, чтобы хоть как-то понять в чем дело. Расспросили все характеристики устройства, на котором смотрят сайт менеджеры клиента. У нас в офисе ни у кого подобных моделей нет. Начали мучать знакомых, один нашелся – скидываем ссылку, а там тоже полный порядок. Значит дело не в девайсе.
Что может быть еще? Пришла еще идея – вдруг вирус по геопозиции или ip определяет город и только там показывает рекламу. Заказчик из столицы, а мы в Брянске. Новая зацепка, продолжаем расследование и узнаем ip клиента. Вместе со скрином ip-шника нам досталась полная расшифровка интернет-соединения, на которой в том числе и провайдер указан – Ростелеком. Для проверки гипотезы объясняю клиенту как установить и включить VPN для смены ip. И вот оно, при подключении через VPN, все хорошо – рекламы нет. Снова лезем в исходники сайта и пытаемся найти хоть что-то связанное с ip или каким-то еще определением местоположения. Но ничего криминального нет. Тупик.
📌 Полный текст истории: почитать.
#Мысли
Вспомнил историю, которая приключилась в 2018 году, она как раз в тему недавнего поста про установку SSL-сертификатов: пост тут.
Но я опять перегнул палку, получился не короткий пост-заметка, а статья на 7 тыс символов. Лимит телеграма 2 тыс символов на пост с картинкой или 4 тыс без нее.
Поэтому выкладываю полный пост на VC, вот ссылка: читать всю историю.
📖 Кусочек для затравки:
Решили выловить отображение рекламы, чтобы хоть как-то понять в чем дело. Расспросили все характеристики устройства, на котором смотрят сайт менеджеры клиента. У нас в офисе ни у кого подобных моделей нет. Начали мучать знакомых, один нашелся – скидываем ссылку, а там тоже полный порядок. Значит дело не в девайсе.
Что может быть еще? Пришла еще идея – вдруг вирус по геопозиции или ip определяет город и только там показывает рекламу. Заказчик из столицы, а мы в Брянске. Новая зацепка, продолжаем расследование и узнаем ip клиента. Вместе со скрином ip-шника нам досталась полная расшифровка интернет-соединения, на которой в том числе и провайдер указан – Ростелеком. Для проверки гипотезы объясняю клиенту как установить и включить VPN для смены ip. И вот оно, при подключении через VPN, все хорошо – рекламы нет. Снова лезем в исходники сайта и пытаемся найти хоть что-то связанное с ip или каким-то еще определением местоположения. Но ничего криминального нет. Тупик.
📌 Полный текст истории: почитать.
#Мысли
👍5
Code Review. Запросы к БД в цикле
Этот кусок кода я проглядел, смержил и апнул на боевой. Код пробыл на рабочем сайте полтора месяца. Заметили его, когда начали заниматься оптимизацией и на одной странице оказалось полторы сотни лишних и одинаковых запросов.
🔴 При выводе списка, для каждой отдельной записи происходит запрос к таблице с пользователями и проверяются права доступа к списку. Это явно опечатка или спешка, а не умышленное построение цикла с одним и тем же одинаковым запросом. Но такой код – серьезный баг, расходуются лишние ресурсы и создается лаг времени ответа бекенда.
🟡 В идеале код стоит переписать: убрать их вьюхи запрос и перенести его глубже в логику – в модели. Во вьюхах нужно избегать запросов к БД и обработки данных. Логика не должна сюда попадать.
🟢 Это код вьюхи Laravel, в котором используется шаблонизатор Blade. Движок шаблонизатора позволяет использовать вставки php, но в документации об этом пишут, что только в крайних случаях. Поэтому лучше избегать такие вставки и пользоваться синтаксисом самого Blade.
#КодРевью
Этот кусок кода я проглядел, смержил и апнул на боевой. Код пробыл на рабочем сайте полтора месяца. Заметили его, когда начали заниматься оптимизацией и на одной странице оказалось полторы сотни лишних и одинаковых запросов.
🔴 При выводе списка, для каждой отдельной записи происходит запрос к таблице с пользователями и проверяются права доступа к списку. Это явно опечатка или спешка, а не умышленное построение цикла с одним и тем же одинаковым запросом. Но такой код – серьезный баг, расходуются лишние ресурсы и создается лаг времени ответа бекенда.
🟡 В идеале код стоит переписать: убрать их вьюхи запрос и перенести его глубже в логику – в модели. Во вьюхах нужно избегать запросов к БД и обработки данных. Логика не должна сюда попадать.
🟢 Это код вьюхи Laravel, в котором используется шаблонизатор Blade. Движок шаблонизатора позволяет использовать вставки php, но в документации об этом пишут, что только в крайних случаях. Поэтому лучше избегать такие вставки и пользоваться синтаксисом самого Blade.
#КодРевью
👍3
Модуль символа рубля за 999 рублей
📖 Пришел к нам в этом году заказчик с проблемой – взломан сайт, совсем не работает, с сервера шли почтовые рассылки и DoS-атаки. После чего хостинг-провайдер заморозил аккаунт до выяснения и устранения причин проблем.
Пошли смотреть. Сайт на Битрикс старой версии, с 2014 или 2015 года не обновлялось ядро CMS. Битрикс популярный в России, таких крупных аналогов нет и является отечественной разработкой. Поэтому многие государственные или около государственные структуры используют его для своих сайтов, чтобы не пользоваться импортными. Но то, что разработчик php, на котором написан Битрикс, родом из Дании, а компания Zend в штатах находится, это уже совсем другая история.
В связи с последними событиями, участились атаки на гос.сайты, и соответственно Битриксу досталось в первую очередь. За последние 2 года в нем нашлось прилично новых уязвимостей, и вспомнили все старые «дыры». Волной взлома затронуло и «гражданские» сайты. Один из таких сайтов нам и пришлось реанимировать.
Процесс починки тоже интересный, но его лучше отдельно рассказать, как-нибудь в другой раз. Сайт восстановили, вирусные скрипты удалили, Битрикс обновили, версию php подняли – все ок, полный порядок. Сайт как новенький.
Пока копались с сайтом, наткнулись на интересный модуль – «Символ рубля». Сперва не поняли, что это за штука. Посмотрели настройки, а там из всего доступного, только выбор десятка разных шрифтов и пара вариаций отображения символа рубля – ₽. Удивились, посмеялись, но ладно. Сайт не молодой, в 2015 году шрифты толком не поддерживали этот символ, приходилось вставлять с помощью svg. Но это не на столько сложная процедура, чтобы писать целый модуль под это дело. Загуглили автора, оказывается это целая компания занималась разработкой, да еще и продает решение за 999 рублей. И если верить счетчику на сайте, то модуль продан больше тысячи раз.
😁 Ну и вишенка на торте – на самом сайте продавца, в стоимости модуля, не выводится символ рубля, а подписано «Руб.».
Пруф: ссылка на модуль.
#Юмор
📖 Пришел к нам в этом году заказчик с проблемой – взломан сайт, совсем не работает, с сервера шли почтовые рассылки и DoS-атаки. После чего хостинг-провайдер заморозил аккаунт до выяснения и устранения причин проблем.
Пошли смотреть. Сайт на Битрикс старой версии, с 2014 или 2015 года не обновлялось ядро CMS. Битрикс популярный в России, таких крупных аналогов нет и является отечественной разработкой. Поэтому многие государственные или около государственные структуры используют его для своих сайтов, чтобы не пользоваться импортными. Но то, что разработчик php, на котором написан Битрикс, родом из Дании, а компания Zend в штатах находится, это уже совсем другая история.
В связи с последними событиями, участились атаки на гос.сайты, и соответственно Битриксу досталось в первую очередь. За последние 2 года в нем нашлось прилично новых уязвимостей, и вспомнили все старые «дыры». Волной взлома затронуло и «гражданские» сайты. Один из таких сайтов нам и пришлось реанимировать.
Процесс починки тоже интересный, но его лучше отдельно рассказать, как-нибудь в другой раз. Сайт восстановили, вирусные скрипты удалили, Битрикс обновили, версию php подняли – все ок, полный порядок. Сайт как новенький.
Пока копались с сайтом, наткнулись на интересный модуль – «Символ рубля». Сперва не поняли, что это за штука. Посмотрели настройки, а там из всего доступного, только выбор десятка разных шрифтов и пара вариаций отображения символа рубля – ₽. Удивились, посмеялись, но ладно. Сайт не молодой, в 2015 году шрифты толком не поддерживали этот символ, приходилось вставлять с помощью svg. Но это не на столько сложная процедура, чтобы писать целый модуль под это дело. Загуглили автора, оказывается это целая компания занималась разработкой, да еще и продает решение за 999 рублей. И если верить счетчику на сайте, то модуль продан больше тысячи раз.
😁 Ну и вишенка на торте – на самом сайте продавца, в стоимости модуля, не выводится символ рубля, а подписано «Руб.».
Пруф: ссылка на модуль.
#Юмор
😁8👍3
Мониторинг SSL-сертификатов
📖 Астрологи объявили неделю постов про SSL. Третий пост за неделю. Это не специально, под руку попадаются. Сегодня, когда пишу этот пост (20.09), как раз пришла уведомлялка от рабочего бота, что завтра последний день, когда живет SSL на одном из сайтов, за которыми мы приглядываем.
Большинство сертификатов продлеваются автоматически – хостингом или certbot-ом. Вот тут про certbot писал: ссылка на пост. Но есть домены, к которым нет доступа – заказчик не дает пароль к регистратору домена. По разным причинам, начиная требованиями безопасности, заканчивая тем, что у клиента вредный сисадмин. Проблема с такими доменами в том, что домен связан с хостингом, к которому у нас есть доступ только через А-запись. На некоторых хостингах в таких случаях не работает автоматическое продление SSL-сертификатов, поскольку DNS не прописаны. А certbot-а не можем запустить, потому что доступа на его установку нет на хостинге. Поэтому пользуемся тем, что есть и выкручиваемся разными способами.
📌 Для подобных нестандартных сайтов, SSL генерируем на локальном компьютере, тем же certbot, только приходится в ручном режиме заливать файлы подтверждения домена на хостинг. А после генерации ключей, устанавливаем их через панель хостинга.
И поскольку сайтов не мало, уследить за всеми сложно, чтобы не забыть обновить сертификат. Во избежание ситуаций, когда пропустили дату завершения, мы добавили телеграм-боту функцию мониторинга. Когда время жизни SSL подходит к концу – менее 7 дней, бот начинает ежедневно по утрам присылать мне в ЛС и общую группу разработчиков уведомление с названием сайта, для которого пора заняться генерацией. А раз функцию добавили боту, то и все остальные домены туда засунули проверяться, вдруг где-то откажет certbot или произойдет сбой у хостера.
📌 И чтобы совсем было удобно, в бота запихнули еще и функцию проверки текущего состояния сертификатов, которой можно воспользоваться в любой момент по запросу. Оба уведомления есть на скрине к посту: напоминание и список по запросу
#Кейсы
📖 Астрологи объявили неделю постов про SSL. Третий пост за неделю. Это не специально, под руку попадаются. Сегодня, когда пишу этот пост (20.09), как раз пришла уведомлялка от рабочего бота, что завтра последний день, когда живет SSL на одном из сайтов, за которыми мы приглядываем.
Большинство сертификатов продлеваются автоматически – хостингом или certbot-ом. Вот тут про certbot писал: ссылка на пост. Но есть домены, к которым нет доступа – заказчик не дает пароль к регистратору домена. По разным причинам, начиная требованиями безопасности, заканчивая тем, что у клиента вредный сисадмин. Проблема с такими доменами в том, что домен связан с хостингом, к которому у нас есть доступ только через А-запись. На некоторых хостингах в таких случаях не работает автоматическое продление SSL-сертификатов, поскольку DNS не прописаны. А certbot-а не можем запустить, потому что доступа на его установку нет на хостинге. Поэтому пользуемся тем, что есть и выкручиваемся разными способами.
📌 Для подобных нестандартных сайтов, SSL генерируем на локальном компьютере, тем же certbot, только приходится в ручном режиме заливать файлы подтверждения домена на хостинг. А после генерации ключей, устанавливаем их через панель хостинга.
И поскольку сайтов не мало, уследить за всеми сложно, чтобы не забыть обновить сертификат. Во избежание ситуаций, когда пропустили дату завершения, мы добавили телеграм-боту функцию мониторинга. Когда время жизни SSL подходит к концу – менее 7 дней, бот начинает ежедневно по утрам присылать мне в ЛС и общую группу разработчиков уведомление с названием сайта, для которого пора заняться генерацией. А раз функцию добавили боту, то и все остальные домены туда засунули проверяться, вдруг где-то откажет certbot или произойдет сбой у хостера.
📌 И чтобы совсем было удобно, в бота запихнули еще и функцию проверки текущего состояния сертификатов, которой можно воспользоваться в любой момент по запросу. Оба уведомления есть на скрине к посту: напоминание и список по запросу
#Кейсы
👍5
JS-плагин для работы с целями метрики
📖 По завершению разработки, сайт сам по себе не несет никакой пользы, если его никто не видит. Всегда должна быть следующая итерация по привлечению посетителей – seo-оптимизация или/и запуск рекламы. Но каким бы способом сайт не «раскручивали», нужно отслеживать и понимать действия пользователей. Чтобы на основе этих данных доработать сайт или внести корректировки в продвижение. Отслеживать посетителей можно большим количеством инструментов, но основной – это Яндекс.Метрика.
Метрика собирает большое количество данных разу после установки кода счетчика на сайт. Но помимо готовых инструментов, можно добавлять дополнительные цели для отслеживания действий пользователей – js-события, которые отправляются метрике после совершениея различных действия: клики, скролл, вход или уход со страницы, фокус на элемент и так далее, что может потребоваться маркетологу, для аналитики.
JS-события нужно вызывать «руками» через код, отлавливая конкретное действие пользователя на сайте. Это типовая задача, но каждый раз нужно писать обработчики. Чтобы упростить себе жизнь, написали плагин, который имеет набор самых ходовых событий и достаточно только вызывать их с нужным селектором или параметром.
Плагин не сложный, но может кому-нибудь облегчить жизнь. Поэтому выложили его исходники в открытый доступ и оформили как пакет для npm.
📌 Плагин работает со старой и новой версией счетчиков.
И умеет обрабатывать:
– клик на элемент
– установку фокуса в инпут/текстарею
– доскралливание страницы на определенное количество пикселей
– доскралливание страницы до элемента
– вход на определенную страницу, конкретный урл
– вход на определенную страницу, по вхождению урла
– уход с определенной страницы, конкретный урл
– уход с определенной страницы, по вхождению урла
📌 Пакет в npmjs: ссылка.
Документация: ссылка.
Открытый репозиторий: ссылка.
❗️Если есть идеи или предложения по добавлению новых обработчиков – пишите мне в ЛС или в комментарии к посту.
#НашиРазработки
📖 По завершению разработки, сайт сам по себе не несет никакой пользы, если его никто не видит. Всегда должна быть следующая итерация по привлечению посетителей – seo-оптимизация или/и запуск рекламы. Но каким бы способом сайт не «раскручивали», нужно отслеживать и понимать действия пользователей. Чтобы на основе этих данных доработать сайт или внести корректировки в продвижение. Отслеживать посетителей можно большим количеством инструментов, но основной – это Яндекс.Метрика.
Метрика собирает большое количество данных разу после установки кода счетчика на сайт. Но помимо готовых инструментов, можно добавлять дополнительные цели для отслеживания действий пользователей – js-события, которые отправляются метрике после совершениея различных действия: клики, скролл, вход или уход со страницы, фокус на элемент и так далее, что может потребоваться маркетологу, для аналитики.
JS-события нужно вызывать «руками» через код, отлавливая конкретное действие пользователя на сайте. Это типовая задача, но каждый раз нужно писать обработчики. Чтобы упростить себе жизнь, написали плагин, который имеет набор самых ходовых событий и достаточно только вызывать их с нужным селектором или параметром.
Плагин не сложный, но может кому-нибудь облегчить жизнь. Поэтому выложили его исходники в открытый доступ и оформили как пакет для npm.
📌 Плагин работает со старой и новой версией счетчиков.
И умеет обрабатывать:
– клик на элемент
– установку фокуса в инпут/текстарею
– доскралливание страницы на определенное количество пикселей
– доскралливание страницы до элемента
– вход на определенную страницу, конкретный урл
– вход на определенную страницу, по вхождению урла
– уход с определенной страницы, конкретный урл
– уход с определенной страницы, по вхождению урла
📌 Пакет в npmjs: ссылка.
Документация: ссылка.
Открытый репозиторий: ссылка.
❗️Если есть идеи или предложения по добавлению новых обработчиков – пишите мне в ЛС или в комментарии к посту.
#НашиРазработки
👍7❤1
Упаковать в архив измененные файлы из последнего коммита
📖 Да, все мы знаем, что такое CI/CD и о всех его плюсах. Но в мире заказной разработки частенько встречаются проекты, которые дольше настраивать, чем проект просуществует. Или задачи на столько срочные и простые, что улетают сразу в мастера и следом на продакшен. Да что тут говорить, многие сайты и без контроля версий приходят от заказчиков, но это уже перебор – репозитории настраиваем перед началом работы.
К чему я это? Вот прямо сейчас случилась ситуация, что нужно скачать файлы из последнего коммита. Проект есть в репозитории, на боевом и тестовом серверах, и на некоторых рабочих компьютерах. У меня нет скаченного репозитория, а файлы нужны. Можно сходить в веб-интерфейс гитлаба и вытащить руками нужные файлы, но коммит не маленький, копаться можно минут 5-10, пока файлы по одному скачаю. К тому же есть способ быстро упаковать файлы из нужного коммита сразу в архив. Заодно и пост написать можно 😁
📌 Чтобы упаковать в архив файлы, которые редактировались в последнем коммите, нужно знать два хеша коммитов – последний и предпоследний, чтобы сравнить изменения и узнать имена файлов, для последующего их архивирования.
Для этого выполняем команду:
📖 Да, все мы знаем, что такое CI/CD и о всех его плюсах. Но в мире заказной разработки частенько встречаются проекты, которые дольше настраивать, чем проект просуществует. Или задачи на столько срочные и простые, что улетают сразу в мастера и следом на продакшен. Да что тут говорить, многие сайты и без контроля версий приходят от заказчиков, но это уже перебор – репозитории настраиваем перед началом работы.
К чему я это? Вот прямо сейчас случилась ситуация, что нужно скачать файлы из последнего коммита. Проект есть в репозитории, на боевом и тестовом серверах, и на некоторых рабочих компьютерах. У меня нет скаченного репозитория, а файлы нужны. Можно сходить в веб-интерфейс гитлаба и вытащить руками нужные файлы, но коммит не маленький, копаться можно минут 5-10, пока файлы по одному скачаю. К тому же есть способ быстро упаковать файлы из нужного коммита сразу в архив. Заодно и пост написать можно 😁
📌 Чтобы упаковать в архив файлы, которые редактировались в последнем коммите, нужно знать два хеша коммитов – последний и предпоследний, чтобы сравнить изменения и узнать имена файлов, для последующего их архивирования.
Для этого выполняем команду:
git log
Далее вызываем команду получения имен файлов с изменениями и архивацию с сохранением структуры папок, внутри которых хранятся файлы:git diff --name-only хеш-последнего-коммита хеш-предпоследнего-коммита | tar -czf files.tgz -T -Дальше остается только скачать архив с сервера. Можно через ftp/sftp менеджер подключиться. Или через консоль доделать, вызвав scp:
scp [имя пользователя]@[адрес сервера]:[путь к файлу] [путь к файлу на локальном компьютере]#БазаЗнаний
👍5
Code Review таблицы базы данных
В идеале столбец category_id должен иметь foreign key для связи с категориями. Тогда запросы будут проходить быстрей. Но это можно опустить, чтобы проще работать с данными из двух таблиц по отдельности. Главное, в коде все связанные действия не потерять.
name – это заголовок статьи. Он должен называться title, чтобы не вводить в заблуждение своим названием. А тип данных лучше поменять на varchar(255), чтобы не резервировать лишнюю память. Выделять место под возможные 65535 символов в заголовке, это перебор. 255 будет достаточно.
capt_min – это короткое описание. Соответственно и поле лучше назвать caption_short. Название столбцов должны отражать их суть. А приписки min и max подразумевают, что в поле будут числовые значения, никак не строковые.
img – картинка для статьи. Лучше переименовать в полное слово image, и добавить уточняющую приписку image_preview, image_full и тд. Поскольку сейчас одно поле под картинку, а через пару месяцев понадобиться еще одна, а потом еще. И будет путаница.
С created_at и updated_at порядок. Работа с этой БД будет через Laravel, который сам умеет обновлять эти столбцы, без дополнительной логики.
date отвечает за дату статьи. Тип данных подходит, но название лучше поменять на более уточняющее, например, date_publication. Контентное поле, которое правится «руками» из админки.
type_news – тип статьи: статья, новость, интервью и тд. В идеале вынести все варианты типов в отдельную таблицу, а тут хранить только id для связи. Но если оставлять так, то стоит переименовать в type_article – таблица то article называется. И по этому полю будут происходить выборки, поэтому не лишним добавить индекс для ускорения. Но т.к. контента тут не много, можно не усложнять. Так же стоит изменить тип данных, до varchar(32).
link – ссылка на сторонний сайт с подробным описанием. Название меняем на link_more, а тип данных на varchar(255) – сейчас тут совсем уже перебор с longtext, который хранит до 4.3 миллионов символов, таких ссылок не встречал.
#КодРевью
В идеале столбец category_id должен иметь foreign key для связи с категориями. Тогда запросы будут проходить быстрей. Но это можно опустить, чтобы проще работать с данными из двух таблиц по отдельности. Главное, в коде все связанные действия не потерять.
name – это заголовок статьи. Он должен называться title, чтобы не вводить в заблуждение своим названием. А тип данных лучше поменять на varchar(255), чтобы не резервировать лишнюю память. Выделять место под возможные 65535 символов в заголовке, это перебор. 255 будет достаточно.
capt_min – это короткое описание. Соответственно и поле лучше назвать caption_short. Название столбцов должны отражать их суть. А приписки min и max подразумевают, что в поле будут числовые значения, никак не строковые.
img – картинка для статьи. Лучше переименовать в полное слово image, и добавить уточняющую приписку image_preview, image_full и тд. Поскольку сейчас одно поле под картинку, а через пару месяцев понадобиться еще одна, а потом еще. И будет путаница.
С created_at и updated_at порядок. Работа с этой БД будет через Laravel, который сам умеет обновлять эти столбцы, без дополнительной логики.
date отвечает за дату статьи. Тип данных подходит, но название лучше поменять на более уточняющее, например, date_publication. Контентное поле, которое правится «руками» из админки.
type_news – тип статьи: статья, новость, интервью и тд. В идеале вынести все варианты типов в отдельную таблицу, а тут хранить только id для связи. Но если оставлять так, то стоит переименовать в type_article – таблица то article называется. И по этому полю будут происходить выборки, поэтому не лишним добавить индекс для ускорения. Но т.к. контента тут не много, можно не усложнять. Так же стоит изменить тип данных, до varchar(32).
link – ссылка на сторонний сайт с подробным описанием. Название меняем на link_more, а тип данных на varchar(255) – сейчас тут совсем уже перебор с longtext, который хранит до 4.3 миллионов символов, таких ссылок не встречал.
#КодРевью
👍6
Запросы при заполнении input-а
📖 За неделю несколько раз попадались задачки на поиск по базе данных или через api стороннего сервиса при пользовательском вводе текста в инпут – поиск с автозаполнением. Например, ввод адреса при оформлении заказа.
Чтобы интерфейс был шустрым и более отзывчивым, есть несколько простых трюков. Если их комбинировать, то получается форма, где можно уменьшить время задержки ответа до такой, что пользователь ее не заметит.
1️⃣ Начинаем отправлять запрос после ввода третьего символа. Смысла что-то искать в БД по 1-2 символам нет, список с подсказками все равно будет не релевантный, а несколько запросов сэкономить можно.
2️⃣ При отправке нового запроса, проверить статус предыдущего. Возможно, он еще не ответил. В таком случае можно принудительно обрывать соединение, чтобы не ждать ответ и не выводить не актуальные, ведь был введен новый символ и результат запроса меняется. Процесс на сервере останется, это не оптимизация нагрузки.
3️⃣ Добавить задержку отправки запроса, достаточно 100 миллисекунд. Средняя скорость набора текста 180-220 символов в минуту, это примерно один символ за 300 милисекунд.
4️⃣ Пока запрос обрабатывается, хорошо выводить прелоадер. Хотя бы небольшой внутри инпута. Пользователю нужно объяснять и показывать, когда что-то происходит. Тогда интерфейс будет понятней и пользоваться им удобней. Разработка интерфейсов дело дизайнеров, а не разработчиков, но самые основы знать не будет лишним.
📌 Для примера собрал страничку, где можно попробовать ввод в инпут и посмотреть, как отправляются и прерываются запросы. Чтобы понятней было, на сервере таймаут ответа 3 секунды. Пример без прелоадера, его уже лень было добавлять. В консоле видны запросы и их прерывание – пример на скрине. Если нужны исходники, то они в коде страницы видны.
Пример тут: смотреть.
❗️Примечание: это советы по улучшению интерфейса, для оптимизации нужно использовать кеширование на сервере и на фронте запоминать ответы, чтобы не дублировать запросы.
#Мысли
📖 За неделю несколько раз попадались задачки на поиск по базе данных или через api стороннего сервиса при пользовательском вводе текста в инпут – поиск с автозаполнением. Например, ввод адреса при оформлении заказа.
Чтобы интерфейс был шустрым и более отзывчивым, есть несколько простых трюков. Если их комбинировать, то получается форма, где можно уменьшить время задержки ответа до такой, что пользователь ее не заметит.
📌 Для примера собрал страничку, где можно попробовать ввод в инпут и посмотреть, как отправляются и прерываются запросы. Чтобы понятней было, на сервере таймаут ответа 3 секунды. Пример без прелоадера, его уже лень было добавлять. В консоле видны запросы и их прерывание – пример на скрине. Если нужны исходники, то они в коде страницы видны.
Пример тут: смотреть.
❗️Примечание: это советы по улучшению интерфейса, для оптимизации нужно использовать кеширование на сервере и на фронте запоминать ответы, чтобы не дублировать запросы.
#Мысли
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Прием платежей без защиты сигнатурой
📖 На скрине два куска кода – это два роута для работы с системой оплаты Робокасса. Слева для страницы успеха, на которую платежная система редиректит покупателя после успешной оплаты. Справа эндпоинт, на который Робокасса отправляет сообщение приложению при успешной оплате.
В обоих случаях отправляется post запрос от системы оплаты с набором параметров о заказе. Но в случае успешной страницы(слева) нет данных о платеже, его статусе и самое главное – нет сигнатуры.
Код писал молодой специалист и перепутал эндпоинты. Но ошибка серьезная: в обработчике успеха происходит обновление статуса заказа. А в методе, который получает все данные об оплате, только сообщение пользователю отправляется, что все прошло успешно.
🔴 Нельзя обновлять статус оплаты, без проверки данных и сравнения сигнатур – расчетной, которая формируется из набора всех параметров оплаты и платежных паролей, и сигнатурой, которую прислала система оплаты или банк. Если оставить, так как сейчас показано на скринах, то можно через постмана слать запросы с ID заказа и обновлять себе статус заказа на оплаченный. Это даже не дыра, а проходной двор в безопасности.
🔴 Важно при интеграции с системами оплаты, банками или другими сервисами, работающими с финансовыми, документальными, конфиденциальными данными, всегда подписывать шифрованным хешем – сигнатурой, каждый запрос. Иначе можно подделать любой запрос и подсунуть любые данные, которые принимает эндпоинт.
#КодРевью
📖 На скрине два куска кода – это два роута для работы с системой оплаты Робокасса. Слева для страницы успеха, на которую платежная система редиректит покупателя после успешной оплаты. Справа эндпоинт, на который Робокасса отправляет сообщение приложению при успешной оплате.
В обоих случаях отправляется post запрос от системы оплаты с набором параметров о заказе. Но в случае успешной страницы(слева) нет данных о платеже, его статусе и самое главное – нет сигнатуры.
Код писал молодой специалист и перепутал эндпоинты. Но ошибка серьезная: в обработчике успеха происходит обновление статуса заказа. А в методе, который получает все данные об оплате, только сообщение пользователю отправляется, что все прошло успешно.
🔴 Нельзя обновлять статус оплаты, без проверки данных и сравнения сигнатур – расчетной, которая формируется из набора всех параметров оплаты и платежных паролей, и сигнатурой, которую прислала система оплаты или банк. Если оставить, так как сейчас показано на скринах, то можно через постмана слать запросы с ID заказа и обновлять себе статус заказа на оплаченный. Это даже не дыра, а проходной двор в безопасности.
🔴 Важно при интеграции с системами оплаты, банками или другими сервисами, работающими с финансовыми, документальными, конфиденциальными данными, всегда подписывать шифрованным хешем – сигнатурой, каждый запрос. Иначе можно подделать любой запрос и подсунуть любые данные, которые принимает эндпоинт.
#КодРевью
👍5
Оптимизация скорости загрузки сайта
📖 Года 4 назад у нас в разработке был простенький сайт для торгового центра, где был список всех магазинов из этого ТЦ, карта-план по этажам и каталог товаров от некоторых продавцов, которые решились пользоваться онлайн-витриной. Каталог маленький – пара сотен товаров и десяток категорий. Но на главной странице выводили почти все динамические элементы их разных сущностей, что были на сайте: топ товаров, новинки товаров, скидки, список продавцов, бренды и еще 3-4 разных карусели. То есть заходная страница была самая «тяжелая» в плане формирования ее как на бекенде, так и на фронте.
Весь сайт работал быстро, даже каталог с фильтрами отрабатывал без подлагиваний, хотя сайт тогда делали со статичной версткой, без фронтендовских фреймворков. А вот главная страница ужасно тормозила. Ни нам ни заказчику такая скорость работы не нравилась.
📌 Начали разбираться в чем дело. Первое, что приходит в голову – проверить скорость ответа бекенда, вес контента на фронте и время загрузки всей страницы. С бекендом порядок – лишних запросов к базе данных нет, ответ кешируется. С картинками тоже норма – все, что можно оптимизированно до адекватного веса, лейзилоад добавили. Но сама страница, код html имеет какие-то очень странно большие размеры. Точный вес не помню, но что-то порядка 7-10 мегабайт. А интернет 4-5 лет назад был ощутимо медленнее, особенно в офисах, где корпоративные тарифы в 10 раз выше, чем для домашнего использования.
Откуда такой вес у html? Больше, чем весь контент. Заглянули в код, а там выводится огромный массив данных, обернутый стилем display: none. Оказывается, в один из дней запуска проекта, нужно было быстро и без остановки сайта отдебажить вывод всех витрин на главной странице. И один из разработчиков, собрав все ответы запросов из БД в один массив, вывел его прямо на боевом сайте на главной странице, скрыв стилями. А после отладки забыл убрать.
😁 Выключили «режим скрытого дебага», удалив этот вывод, и главная страница стала открываться раза в 3-4 быстрее.
#Юмор
📖 Года 4 назад у нас в разработке был простенький сайт для торгового центра, где был список всех магазинов из этого ТЦ, карта-план по этажам и каталог товаров от некоторых продавцов, которые решились пользоваться онлайн-витриной. Каталог маленький – пара сотен товаров и десяток категорий. Но на главной странице выводили почти все динамические элементы их разных сущностей, что были на сайте: топ товаров, новинки товаров, скидки, список продавцов, бренды и еще 3-4 разных карусели. То есть заходная страница была самая «тяжелая» в плане формирования ее как на бекенде, так и на фронте.
Весь сайт работал быстро, даже каталог с фильтрами отрабатывал без подлагиваний, хотя сайт тогда делали со статичной версткой, без фронтендовских фреймворков. А вот главная страница ужасно тормозила. Ни нам ни заказчику такая скорость работы не нравилась.
📌 Начали разбираться в чем дело. Первое, что приходит в голову – проверить скорость ответа бекенда, вес контента на фронте и время загрузки всей страницы. С бекендом порядок – лишних запросов к базе данных нет, ответ кешируется. С картинками тоже норма – все, что можно оптимизированно до адекватного веса, лейзилоад добавили. Но сама страница, код html имеет какие-то очень странно большие размеры. Точный вес не помню, но что-то порядка 7-10 мегабайт. А интернет 4-5 лет назад был ощутимо медленнее, особенно в офисах, где корпоративные тарифы в 10 раз выше, чем для домашнего использования.
Откуда такой вес у html? Больше, чем весь контент. Заглянули в код, а там выводится огромный массив данных, обернутый стилем display: none. Оказывается, в один из дней запуска проекта, нужно было быстро и без остановки сайта отдебажить вывод всех витрин на главной странице. И один из разработчиков, собрав все ответы запросов из БД в один массив, вывел его прямо на боевом сайте на главной странице, скрыв стилями. А после отладки забыл убрать.
😁 Выключили «режим скрытого дебага», удалив этот вывод, и главная страница стала открываться раза в 3-4 быстрее.
#Юмор
😁10👍3
Мониторинг падения сайтов
Продолжение темы мониторинга, которую уже несколько раз затрагивал в постах про почтовые формы, SSL-сертификаты и бекапы.
📖 На этот раз про сами сайты. У нас есть проекты в разработке и на сопровождении, в рамках которого постоянно идут работы по расширению функционала. У каждого сайта или сервиса свой сервер или хостинг, и только часть находится на наших серверах, большинство сторонние – клиентские. Поэтому нет никакого централизованного ПО для мониторинга работоспособности сайтов. К тому же не у всех заказчиков выделенные или физические сервера, многим хватает хостинга. Но редко какой хостинг предоставляет возможность устанавливалось что-то дополнительно, кроме необходимого минимум для работы сайта. Но за сайтами нужно смотреть, бывают сбои, повышение нагрузки, закачиваются лимиты места на хостинге и еще куча разных причин, по которым сайт может перестать корректно работать.
За сайтами мы присматриваем, поэтому должны вовремя реагировать на «падения». В ручном режиме это сложно делать из-за количества, а ждать сообщения от пользователей или заказчика о проблемах на сайте – это не наш метод. Можно настроить яндекс метрику на уведомления, когда сайт перестает быть доступным, но такие уведомления приходят с опозданием, особенно для сайтов с небольшой посещаемостью.
📌 В итоге придумали простое решение. Каждые 10 минут делаем запрос к каждому сайту и проверяем его http-код ответа. Если код отличается от 200, значит с сайтом, хостингом/сервером или доменом проблема и нужно идти разбираться. Чтобы уведомления о проблеме не потерялось, оно отправляется ботом в общую группу разработчиков в телеграм. Так же бот запоминает, какой сайт и во сколько упал и при следующем корректном ответе, когда придет 200й код, пишет об этом в группу. Пример сообщений от бота на скрине.
#Кейсы
Продолжение темы мониторинга, которую уже несколько раз затрагивал в постах про почтовые формы, SSL-сертификаты и бекапы.
📖 На этот раз про сами сайты. У нас есть проекты в разработке и на сопровождении, в рамках которого постоянно идут работы по расширению функционала. У каждого сайта или сервиса свой сервер или хостинг, и только часть находится на наших серверах, большинство сторонние – клиентские. Поэтому нет никакого централизованного ПО для мониторинга работоспособности сайтов. К тому же не у всех заказчиков выделенные или физические сервера, многим хватает хостинга. Но редко какой хостинг предоставляет возможность устанавливалось что-то дополнительно, кроме необходимого минимум для работы сайта. Но за сайтами нужно смотреть, бывают сбои, повышение нагрузки, закачиваются лимиты места на хостинге и еще куча разных причин, по которым сайт может перестать корректно работать.
За сайтами мы присматриваем, поэтому должны вовремя реагировать на «падения». В ручном режиме это сложно делать из-за количества, а ждать сообщения от пользователей или заказчика о проблемах на сайте – это не наш метод. Можно настроить яндекс метрику на уведомления, когда сайт перестает быть доступным, но такие уведомления приходят с опозданием, особенно для сайтов с небольшой посещаемостью.
📌 В итоге придумали простое решение. Каждые 10 минут делаем запрос к каждому сайту и проверяем его http-код ответа. Если код отличается от 200, значит с сайтом, хостингом/сервером или доменом проблема и нужно идти разбираться. Чтобы уведомления о проблеме не потерялось, оно отправляется ботом в общую группу разработчиков в телеграм. Так же бот запоминает, какой сайт и во сколько упал и при следующем корректном ответе, когда придет 200й код, пишет об этом в группу. Пример сообщений от бота на скрине.
#Кейсы
👍6❤1🔥1🥰1
Плагин для репостов в соц.сети и мессенджеры
📖 Для репостов сайтов в соц.сети и мессенджеры есть много готовых виджетов. И ими удобно пользоваться в некоторых случаях. Нам редко подходят такой вариант из-за того, что виджет диктует свою разметку верстки, не всегда и не все можно стилизовать, а в добавок и js подключается со стороннего домена, что на скорости загрузки страницы может сказаться. А если что-то случится с сервисом, предоставляющим плагин, то починить его нет возможности.
Поэтому для кнопок репостов используем свои наработки. Код простенький, но работает как на десктопе, так и на телефонах с планшетами. Для репоста страницы в соц.сеть или мессенджер, у каждого сервиса есть апи – их можно вызывать с разным набором get-параметром. Куски кода репостов под разные сервисы долго хранили в базе знаний, но как выдалось свободное время, упаковали в плагин и опубликовали в npmjs. Этим плагином и хочу поделиться, возможно кому-то еще он будет полезен.
📌 Плагин работает со всеми популярными соц.сетями и мессенджерами.
– Вконтакте
– Facebook
– Одноклассники
– Twitter
– Telegram
– WhatsApp
И другие, полный список есть в ридми репозитория.
📌 Пакет в npmjs: ссылка.
Документация: ссылка.
Открытый репозиторий: ссылка.
❗️Важный момент. Чтобы репосты были красивые и можно было управлять заголовком, описанием и картинкой-превью, то на страницах должна использоваться Open Graph разметка, в которой прописаны все нужные данные. Подробнее в следующем посте.
Если есть идеи или предложения по улучшению плагина, то пишите мне в ЛС или в комментарии к посту.
#НашиРазработки
📖 Для репостов сайтов в соц.сети и мессенджеры есть много готовых виджетов. И ими удобно пользоваться в некоторых случаях. Нам редко подходят такой вариант из-за того, что виджет диктует свою разметку верстки, не всегда и не все можно стилизовать, а в добавок и js подключается со стороннего домена, что на скорости загрузки страницы может сказаться. А если что-то случится с сервисом, предоставляющим плагин, то починить его нет возможности.
Поэтому для кнопок репостов используем свои наработки. Код простенький, но работает как на десктопе, так и на телефонах с планшетами. Для репоста страницы в соц.сеть или мессенджер, у каждого сервиса есть апи – их можно вызывать с разным набором get-параметром. Куски кода репостов под разные сервисы долго хранили в базе знаний, но как выдалось свободное время, упаковали в плагин и опубликовали в npmjs. Этим плагином и хочу поделиться, возможно кому-то еще он будет полезен.
📌 Плагин работает со всеми популярными соц.сетями и мессенджерами.
– Вконтакте
– Одноклассники
– Telegram
И другие, полный список есть в ридми репозитория.
📌 Пакет в npmjs: ссылка.
Документация: ссылка.
Открытый репозиторий: ссылка.
❗️Важный момент. Чтобы репосты были красивые и можно было управлять заголовком, описанием и картинкой-превью, то на страницах должна использоваться Open Graph разметка, в которой прописаны все нужные данные. Подробнее в следующем посте.
Если есть идеи или предложения по улучшению плагина, то пишите мне в ЛС или в комментарии к посту.
#НашиРазработки
👍5🔥1
Микроразметка Open Graph для репостов и превью ссылок
📖 В прошлом посте публиковал наш плагин для репостов в соц.сети и мессенджеры. Но чтобы плагин отправлял «красивые ссылки», их нужно форматировать на самих страницах. Управление заголовком, описанием и картинкой для репоста, а также просто для превью ссылки, которую можно отправить в мессенджер, происходит через микроразметку Open Graph.
📌 Open Graph (или OG-теги) добавляются в head каждой страницы и объясняют соц.сетям и мессенджерам, какой контент использовать для превью. Основные параметры, которые стоит использовать на всех страницах:
– og:title – для заголовка
– og:description – для подписи
– og:image – для картинки
Кроме заголовка, описания и картинки, есть еще мета-теги, которые позволяют более детально управлять отображением превью. Полный список есть в документации: ссылка.
📌 Стандрат OG разработал фейсбук, но его быстро подхватили и внедрили все крупные компании. Но есть несколько не стандартных сервисов – telegram и twitter.
Twitter принимает только свои мет-теги:
– twitter:title
– twitter:description
– twitter:image:src
И так далее. Полный список можно нагуглить, если понадобиться.
📌 Telegram умеет считывать заголовок, описание и урл картинки из двух блоков, как из разметки твиттера, так и из классических тегов OG. Но если на странице сразу два блока разметки, то использует первый. Кроме того, телеграм может менять размер отображаемой картинки, по умолчанию мелкий квадратик, но можно задать и большой прямоугольник. Управляется через мета-тег twitter:card, который может принимать параметр summary для маленькой картинки и summary для большой.
❗️ Для ускорения работы, все соц.сети и мессенджеры используют кеш. Иногда он может «жить» до нескольких суток и сложно отладить отображение. Можно обманывать сервисы, дописывая рандомные get-параметры в урл. А можно пользоваться официальными инструментами для сброса кеша. Но их сложно найти, список того, что мы откопали: ВК, ФБ, TW, TG.
Пример страницы, где подсмотреть OG разметку: ссылка.
#БазаЗнаний
📖 В прошлом посте публиковал наш плагин для репостов в соц.сети и мессенджеры. Но чтобы плагин отправлял «красивые ссылки», их нужно форматировать на самих страницах. Управление заголовком, описанием и картинкой для репоста, а также просто для превью ссылки, которую можно отправить в мессенджер, происходит через микроразметку Open Graph.
📌 Open Graph (или OG-теги) добавляются в head каждой страницы и объясняют соц.сетям и мессенджерам, какой контент использовать для превью. Основные параметры, которые стоит использовать на всех страницах:
– og:title – для заголовка
– og:description – для подписи
– og:image – для картинки
Кроме заголовка, описания и картинки, есть еще мета-теги, которые позволяют более детально управлять отображением превью. Полный список есть в документации: ссылка.
📌 Стандрат OG разработал фейсбук, но его быстро подхватили и внедрили все крупные компании. Но есть несколько не стандартных сервисов – telegram и twitter.
Twitter принимает только свои мет-теги:
– twitter:title
– twitter:description
– twitter:image:src
И так далее. Полный список можно нагуглить, если понадобиться.
📌 Telegram умеет считывать заголовок, описание и урл картинки из двух блоков, как из разметки твиттера, так и из классических тегов OG. Но если на странице сразу два блока разметки, то использует первый. Кроме того, телеграм может менять размер отображаемой картинки, по умолчанию мелкий квадратик, но можно задать и большой прямоугольник. Управляется через мета-тег twitter:card, который может принимать параметр summary для маленькой картинки и summary для большой.
❗️ Для ускорения работы, все соц.сети и мессенджеры используют кеш. Иногда он может «жить» до нескольких суток и сложно отладить отображение. Можно обманывать сервисы, дописывая рандомные get-параметры в урл. А можно пользоваться официальными инструментами для сброса кеша. Но их сложно найти, список того, что мы откопали: ВК, ФБ, TW, TG.
Пример страницы, где подсмотреть OG разметку: ссылка.
#БазаЗнаний
👍8
Топ публикаций за месяц
📖 Новая рубрика, не во вред основному ежедневному расписанию постов.
Каналу месяц, для себя промежуточные статистики собирал, и подумал, что будет интересно подсветить самые популярные посты за сентябрь. В подборку попали публикации по количеству реакция плюс количество пересылок в личные сообщения или группы – за каждое действие по одному баллу. Топ собран в порядке популярности, от большего к меньшему. Такие списки ежемесячно буду выкладывать, 2-3 числа нового месяца.
📌 Топ 5 постов за сентябрь:
1️⃣ CSS, который «убивает» браузер
Рубрика #КодРевью
2️⃣ Модуль символа рубля за 999 рублей
Рубрика #Юмор
3️⃣ JS-плагин для работы с целями метрики
Рубрика #НашиРазработки
4️⃣ Логи-убийцы или история бесконечных падений
Рубрика #Статьи
5️⃣ Пиздосометр – измеритель уровня пиз*еца
Рубрика #Юмор и #Статьи
#Топ5Месяца
📖 Новая рубрика, не во вред основному ежедневному расписанию постов.
Каналу месяц, для себя промежуточные статистики собирал, и подумал, что будет интересно подсветить самые популярные посты за сентябрь. В подборку попали публикации по количеству реакция плюс количество пересылок в личные сообщения или группы – за каждое действие по одному баллу. Топ собран в порядке популярности, от большего к меньшему. Такие списки ежемесячно буду выкладывать, 2-3 числа нового месяца.
📌 Топ 5 постов за сентябрь:
Рубрика #КодРевью
Рубрика #Юмор
Рубрика #НашиРазработки
Рубрика #Статьи
Рубрика #Юмор и #Статьи
#Топ5Месяца
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥5
Бесполезный запрос к БД
📖 Откопал в старых заметках по ревью скрин со своеобразным куском кода – прикрепил к посту. Метод передачи данных, когда на сервере бесконечное количество ресурсов и нет нагрузки. Сперва информация о пользователе приходит с фронта, записывается в базу данных, а следом эти же данные запрашиваются из БД и возвращаются туда, откуда пришли. Тут не весь код на скрине – не видно, что body это данные, которые пришли с фронтовой части: то, что забрали у пользователя.
🔴 При получении данных, их нельзя без проверки записывать в базу данных. Это не безопасно, можно поймать любую sql-инъекцию. А если и не инъекцию, то просто «кривые» данные сломают запрос.
🔴 Для чего добавлен запрос на получение уже имеющихся данных я так и не понял. Полагаю, что в запаре просто произошло и в код я залез еще до того, как сам разработчик перепроверялся. Но на всякий случай примечание: лишние запросы – это лишняя трата ресурсов. Если есть возможность оптимизировать обращения к БД, то это нужно делать. Даже в этом ненужном запросе можно правку сделать: вместо звездочки в селекте, лучше использовать перечисление нужных полей.
🟢 Так же странновато отдавать обратно те же самые данные, которые только что пришли. Обработки никакой не произошло, а все эти значения и так уже есть на фронте. Достаточно вернуть id созданного пользователя и статус сохранения, вместо текстового сообщения.
#КодРевью
📖 Откопал в старых заметках по ревью скрин со своеобразным куском кода – прикрепил к посту. Метод передачи данных, когда на сервере бесконечное количество ресурсов и нет нагрузки. Сперва информация о пользователе приходит с фронта, записывается в базу данных, а следом эти же данные запрашиваются из БД и возвращаются туда, откуда пришли. Тут не весь код на скрине – не видно, что body это данные, которые пришли с фронтовой части: то, что забрали у пользователя.
🔴 При получении данных, их нельзя без проверки записывать в базу данных. Это не безопасно, можно поймать любую sql-инъекцию. А если и не инъекцию, то просто «кривые» данные сломают запрос.
🔴 Для чего добавлен запрос на получение уже имеющихся данных я так и не понял. Полагаю, что в запаре просто произошло и в код я залез еще до того, как сам разработчик перепроверялся. Но на всякий случай примечание: лишние запросы – это лишняя трата ресурсов. Если есть возможность оптимизировать обращения к БД, то это нужно делать. Даже в этом ненужном запросе можно правку сделать: вместо звездочки в селекте, лучше использовать перечисление нужных полей.
🟢 Так же странновато отдавать обратно те же самые данные, которые только что пришли. Обработки никакой не произошло, а все эти значения и так уже есть на фронте. Достаточно вернуть id созданного пользователя и статус сохранения, вместо текстового сообщения.
#КодРевью
👍13👏1
Удобная форма обратной связи
🔴 Каждый инпут и кнопка должны «реагировать» на курсор. Если нет нарисованного состояния, то подойдет любое небольшое изменение: затемнение, осветление или добавление прозрачности. Главное показать пользователю, что можно кликать.
🔴 По наведению на все интерактивные элементы курсор обязательно должен превратиться в «руку» – cursor:pointer;
🔴 Все обязательные поля должны валидироваться и подсвечиваться при не верном заполнении. Идеально, если под таким полем еще вывести текстовое пояснение ошибки, чтобы было понятно, где пользователь напортачил при заполнении.
🔴 Для телефона должна быть маска ввода. Причем нужно учитывать ввод начинающийся с +7 или 8. Все плагины автоматически подставляют +7, а следом добавляют 8-ку. И при быстром заполнении теряется последняя цифра номера, это нужно обрабатывать и 8 менять на +7. Продажник не будет звонить на 10 разных номеров, чтобы найти правильный номер телефона.
🔴 Не нужно пихать в один инпут ввод «e-mail или телефон». Это нельзя стопроцентно обработать и на лету поменять формат маски ввода – слишком разные значения.
🔴 На время отправки формы, нужно «заморозить» кнопку «Отправить», пока от бекенда не пришел ответ. Чтобы не было дублей отправок.
🔴 Бекенду нужно всегда корректно ответить – все ок или случилась ошибка. А на фронте принять ответ и обработать его.
🔴В случае проблем с отправкой, про это нужно написать. То же самое и в случае успеха – оповестить пользователя, что его данные приняты, все в порядке.
🟡 Размер шрифта в полях должен быть не меньше 16 пикселей на телефоне, чтобы на айфоне не активировался встроенный зум всей страницы, который ломает верстку.
🟡 Если в форме есть обязательные чекбоксы, и юристы не запрещают, то они должны быть по умолчанию выбраны. Чтобы не мучать пользователя лишней валидацией.
🟢 Все поля должны иметь типовые имена и атрибуты соответствующего типа, чтобы браузер помог пользователю и выполнил автозаполнение – подсказал значения для ввода, которые постоянно использует на других сайтах.
#Мысли
🔴 Каждый инпут и кнопка должны «реагировать» на курсор. Если нет нарисованного состояния, то подойдет любое небольшое изменение: затемнение, осветление или добавление прозрачности. Главное показать пользователю, что можно кликать.
🔴 По наведению на все интерактивные элементы курсор обязательно должен превратиться в «руку» – cursor:pointer;
🔴 Все обязательные поля должны валидироваться и подсвечиваться при не верном заполнении. Идеально, если под таким полем еще вывести текстовое пояснение ошибки, чтобы было понятно, где пользователь напортачил при заполнении.
🔴 Для телефона должна быть маска ввода. Причем нужно учитывать ввод начинающийся с +7 или 8. Все плагины автоматически подставляют +7, а следом добавляют 8-ку. И при быстром заполнении теряется последняя цифра номера, это нужно обрабатывать и 8 менять на +7. Продажник не будет звонить на 10 разных номеров, чтобы найти правильный номер телефона.
🔴 Не нужно пихать в один инпут ввод «e-mail или телефон». Это нельзя стопроцентно обработать и на лету поменять формат маски ввода – слишком разные значения.
🔴 На время отправки формы, нужно «заморозить» кнопку «Отправить», пока от бекенда не пришел ответ. Чтобы не было дублей отправок.
🔴 Бекенду нужно всегда корректно ответить – все ок или случилась ошибка. А на фронте принять ответ и обработать его.
🔴В случае проблем с отправкой, про это нужно написать. То же самое и в случае успеха – оповестить пользователя, что его данные приняты, все в порядке.
🟡 Размер шрифта в полях должен быть не меньше 16 пикселей на телефоне, чтобы на айфоне не активировался встроенный зум всей страницы, который ломает верстку.
🟡 Если в форме есть обязательные чекбоксы, и юристы не запрещают, то они должны быть по умолчанию выбраны. Чтобы не мучать пользователя лишней валидацией.
🟢 Все поля должны иметь типовые имена и атрибуты соответствующего типа, чтобы браузер помог пользователю и выполнил автозаполнение – подсказал значения для ввода, которые постоянно использует на других сайтах.
#Мысли
👍7🔥1
Парсинг json-а
Кусочек коммита, которого хватит на пост. Из-за невнимательности или спешки, разработчик сам себе трудностей придумал и героически их преодолел. В блоке «1» со скрина, принимается ответ от api и обрабатывается. Апи отдает данные в json, которые лежат во вложенном массиве
🔴 Не правильное обращение к данным(жирным выделил потерянный кусок):
$texts = json_decode($texts['texts'], true);
Да же если перепутать и получить какое-то месево в ответе от апи, то это повод задуматься, возможно проблема в апи – ее стоит подправить, если она часть проекта. Или получше посмотреть документацию и примеры, если api от стороннего сервиса. Ни один адекватный сервис не пришлет набор данных одной строкой, которую нужно парсить регулярками.
🔴 По коде не понятно про пункт 2 со скрина. Но тут логика проверки даты на вхождение в интервал дат прошлой недели. Скрипт будет запускаться по понедельникам и делать проверку за прошлую неделю. Сейчас в коде проверка происходит от текущего времени и на 7 дней назад. Это неправильно, поскольку скрипт запускается позже и уже есть промах в пол дня. А есть запуск скрипта перенести на пару дней вперед, то промах станет еще больше. Нужно сравнивать конкретные даты – от понедельника до понедельника.
В Laravel есть пакет Carbon, он хорошо работает с датами и несколькими методами можно определить, попадает проверяемая дата в прошлую неделю или нет. Примерно такой код получится:
🔴 И пункт 3 бонусом: хардкод. Вписан конкретный id в условие.
#КодРевью
Кусочек коммита, которого хватит на пост. Из-за невнимательности или спешки, разработчик сам себе трудностей придумал и героически их преодолел. В блоке «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 в условие.
#КодРевью
👍11
Критическая уязвимость 1С-Битрикс
❗️13 сентября 2023 нашли новую серьезную «дыру» в 1С-Битрикс: Управление сайтом. Уязвимость позволяет подсунуть свои команды на сервер, а дальше уже можно делать что угодно.
Проблемный код находится в модуле «Сайты 24», который редко используется, но по умолчанию включен во всех редакциях Битрикса, начиная с самой простой – «Старт».
Битрикс уже на следующий день(14 сентября) выпустил обновления, которые закрывают уязвимость и рекомендует обновиться немедленно. Официальный сайт с описанием обновления: ссылка.
Чтобы скачать обновление, должна быть активная лицензия Битрикс. Но не на всех проектах ежегодно продляют лицензию, поскольку сайт и без нее работает, только перестает получать обновления. Поэтому ниже описание, как проще всего закрыть уязвимость без обновлений.
📌 Уязвимость в модуле «Сайты 24» – это конструктор страниц. Я не видел ни одного сайта, где бы этот функционал использовался. Поэтому рекомендую просто удалить модуль. При чем отключение и удаление модуля через админку не защищает от уязвимости – проверили. Для полного закрытия «дыры» нужно отключить модуль в админке и удалить всю папку этого модуля. Папка находится тут: /bitrix/modules/landing/. Нужно удалять директорию landing и все вложенные в нее файлы и папки.
❗️Если у кого-то есть дополнительная информация по этой теме, вопросы, нужна консультация или помощь в устранении – пишите мне в личку: Евгений Ипатов.
#БазаЗнаний
❗️13 сентября 2023 нашли новую серьезную «дыру» в 1С-Битрикс: Управление сайтом. Уязвимость позволяет подсунуть свои команды на сервер, а дальше уже можно делать что угодно.
Проблемный код находится в модуле «Сайты 24», который редко используется, но по умолчанию включен во всех редакциях Битрикса, начиная с самой простой – «Старт».
Битрикс уже на следующий день(14 сентября) выпустил обновления, которые закрывают уязвимость и рекомендует обновиться немедленно. Официальный сайт с описанием обновления: ссылка.
Чтобы скачать обновление, должна быть активная лицензия Битрикс. Но не на всех проектах ежегодно продляют лицензию, поскольку сайт и без нее работает, только перестает получать обновления. Поэтому ниже описание, как проще всего закрыть уязвимость без обновлений.
📌 Уязвимость в модуле «Сайты 24» – это конструктор страниц. Я не видел ни одного сайта, где бы этот функционал использовался. Поэтому рекомендую просто удалить модуль. При чем отключение и удаление модуля через админку не защищает от уязвимости – проверили. Для полного закрытия «дыры» нужно отключить модуль в админке и удалить всю папку этого модуля. Папка находится тут: /bitrix/modules/landing/. Нужно удалять директорию landing и все вложенные в нее файлы и папки.
❗️Если у кого-то есть дополнительная информация по этой теме, вопросы, нужна консультация или помощь в устранении – пишите мне в личку: Евгений Ипатов.
#БазаЗнаний
👍7
Дебаг Telegram-бота с webView
📖 На одном проекте – телеграм-боте с веб-вью(mini app), стали приходить жалобы, что не всегда получается оформить заказ: бот с каталогом, корзиной и онлайн-оплатой. Пытались отловить ошибку, про которую сообщали покупатели, но повторить не получалось. На всех устройствах, что имелись в наличии, бот работает без сбоев. А в серверных логах ошибок нет, скрипты не падают.
В вебвью бота нет нормальной консоли для отладки, а работая с вьюхой через браузер, не получается полностью имитировать mini app телеграма. Чтобы хоть немного сузить круг подозреваемых и подсмотреть за действиями пользователей, в веб-вью добавили яндекс метрику с вебвизором. За день насобирали записей, посмотрели – ничего криминального, фронт не сытится. Но заметили, что у нескольких пользователей не появляются товары в корзине, хотя явно кликали по кнопке добавления в каталоге. Пошли опять тыкать бота, сделали все тоже самое, что и пользователи – ошибка не ловится. Но у пользователей точно есть проблема.
📌 Для понимания масштабов бедствия и полного логирования всех событий в боте, добавили еще целей метрики на каждую кнопку в веб-вью. А на бекенде каждую api обернули тремя логами:
– в начале выполнения, когда пришел запрос. Сохраняем все данные
– в обработчике ошибок
– в конце выполнения api перед тем, как отдать результат
Логи пишутся в MongoDB, каждый тип в свою коллекцию.
В итоге имеем 4 метрики на каждое действие: на фронте клик пользователя ловится целями яндекс метрки, а на бекенде три события сохраняются в логи: начало и конец выполнения, возможные ошибки.
После сбора логов, пошли смотреть – количество стартов апи и кликов по кнопкам совпадает, значит с фронта отправляется все запросы на бекенд. А вот количество стартов и завершений апих отличаются.
Дальше дело техники: найти в логах старта апи данные, которые не доходят с фронта или приходят не валидные, добавить проверки в коде и готово.
После починки, логи и цели метрики убирать не стали, пригодится для мониторинга работы бота.
#Кейсы
📖 На одном проекте – телеграм-боте с веб-вью(mini app), стали приходить жалобы, что не всегда получается оформить заказ: бот с каталогом, корзиной и онлайн-оплатой. Пытались отловить ошибку, про которую сообщали покупатели, но повторить не получалось. На всех устройствах, что имелись в наличии, бот работает без сбоев. А в серверных логах ошибок нет, скрипты не падают.
В вебвью бота нет нормальной консоли для отладки, а работая с вьюхой через браузер, не получается полностью имитировать mini app телеграма. Чтобы хоть немного сузить круг подозреваемых и подсмотреть за действиями пользователей, в веб-вью добавили яндекс метрику с вебвизором. За день насобирали записей, посмотрели – ничего криминального, фронт не сытится. Но заметили, что у нескольких пользователей не появляются товары в корзине, хотя явно кликали по кнопке добавления в каталоге. Пошли опять тыкать бота, сделали все тоже самое, что и пользователи – ошибка не ловится. Но у пользователей точно есть проблема.
📌 Для понимания масштабов бедствия и полного логирования всех событий в боте, добавили еще целей метрики на каждую кнопку в веб-вью. А на бекенде каждую api обернули тремя логами:
– в начале выполнения, когда пришел запрос. Сохраняем все данные
– в обработчике ошибок
– в конце выполнения api перед тем, как отдать результат
Логи пишутся в MongoDB, каждый тип в свою коллекцию.
В итоге имеем 4 метрики на каждое действие: на фронте клик пользователя ловится целями яндекс метрки, а на бекенде три события сохраняются в логи: начало и конец выполнения, возможные ошибки.
После сбора логов, пошли смотреть – количество стартов апи и кликов по кнопкам совпадает, значит с фронта отправляется все запросы на бекенд. А вот количество стартов и завершений апих отличаются.
Дальше дело техники: найти в логах старта апи данные, которые не доходят с фронта или приходят не валидные, добавить проверки в коде и готово.
После починки, логи и цели метрики убирать не стали, пригодится для мониторинга работы бота.
#Кейсы
👍8🔥1🤓1
JS-плагин для кастомизации курсора
📖 Иногда на проектах нужно вывести совсем не стандартный курсор мыши и заложенных в браузер вариантов отображения не хватает. Стилями можно заменить cursor на картинку, но поддерживаются не все форматы. Кроссбраузерно работают только png изображения. Большинство браузеров поддерживают svg, но не все. А те, что поддерживают не всегда корректно отображают векторные элементы внутри svg – бьются тонкие линии. Gif-ки совсем не работает в курсорах при подстановки их через CSS. Это сильно связывает руки, поэтому такой способ не всегда подходит и приходится дорабатывать с помощью JS: двигать картинку вслед за курсором, а сам курсор в это время делать невидимым. Логика не сложная, но есть нюансы, которые нужно обрабатывать.
Столкнувшись в очередной раз с подобной задачей, собрали и оформили решение в js-плагин. Так удобней дорабатывать и переиспользовать код. А чтобы не жадничать, плагин выложили в открытый репозиторий и упаковали в npm пакет, вдруг кому-то еще пригодится.
📌 Описание плагина:
Плагин умеет выводить картинку вместо курсора над всей страницей или над заданным элементом. По событию может переключать изображения курсора, а так же добавляет анимацию fade для появления и исчезновения курсора-картинки.
Пример использования есть в папке с примером в репозитории, а в ридми хранится подробное описание по всем свойствам и методам плагина.
📌 Ссылки:
– Пакет в npmjs: ссылка
– Документация: ссылка
– Открытый репозиторий: ссылка
#НашиРазработки
📖 Иногда на проектах нужно вывести совсем не стандартный курсор мыши и заложенных в браузер вариантов отображения не хватает. Стилями можно заменить cursor на картинку, но поддерживаются не все форматы. Кроссбраузерно работают только png изображения. Большинство браузеров поддерживают svg, но не все. А те, что поддерживают не всегда корректно отображают векторные элементы внутри svg – бьются тонкие линии. Gif-ки совсем не работает в курсорах при подстановки их через CSS. Это сильно связывает руки, поэтому такой способ не всегда подходит и приходится дорабатывать с помощью JS: двигать картинку вслед за курсором, а сам курсор в это время делать невидимым. Логика не сложная, но есть нюансы, которые нужно обрабатывать.
Столкнувшись в очередной раз с подобной задачей, собрали и оформили решение в js-плагин. Так удобней дорабатывать и переиспользовать код. А чтобы не жадничать, плагин выложили в открытый репозиторий и упаковали в npm пакет, вдруг кому-то еще пригодится.
📌 Описание плагина:
Плагин умеет выводить картинку вместо курсора над всей страницей или над заданным элементом. По событию может переключать изображения курсора, а так же добавляет анимацию fade для появления и исчезновения курсора-картинки.
Пример использования есть в папке с примером в репозитории, а в ридми хранится подробное описание по всем свойствам и методам плагина.
📌 Ссылки:
– Пакет в npmjs: ссылка
– Документация: ссылка
– Открытый репозиторий: ссылка
#НашиРазработки
👍3❤1
Настройка VPN через WireGuard
📖 В последнее время VPN стал ходовым инструментом. Можно найти бесплатные конфиги, которые работают через непонятные сервера, или купить доступ с более скоростным каналом. А можно настроить свой сервер, чтобы иметь над ним полный контроль. Проблема только найти и оплатить заграничный сервер. Но недавно наткнулся на хостера, который принимает оплату русскими картами и предоставляет виртуальные сервера, размещенные в Европе. Для экспериментов купил VPS в Голландии. Не дорогой, 5 евро в месяц всего, но и по мощности слабоват. Что-то серьезное на нем будет сложно запустить, а вот для VPN самый раз. Если кому-то нужен этот хостинг – пишите мне в ЛС или в комменты к посту, чтобы не было рекламы)
Сервис продает и VPN сразу, но так не интересно – не наш путь. Самому разобраться и настроить сервер увлекательней. Настройка не сложная, если использовать заготовки и установщики. Для создания тоннелей можно использовать много разных приложений, но для кроссплатформенной работы идеально подходит WireGuard – это бесплатное и опенсорсное ПО.
📌 Для настройки сервера и дальнейшего упрощения работы по генерации новых пользователей VPN есть удобный bash-скрипт, который сам все настраивает. Репозиторий со скриптом и документацией по нему: тут.
Все, что нужно сделать на сервере, это скачать скрипт и запустить его. Дальше все настройки происходят в режиме «далее-далее».
Скачиваем скрипт на сервер:
📌 Теперь для создания нового пользователя, достаточно вызывать команду в папке со скриптом:
❗️ На VPS ресурсов еще хватает, 20-ю профилями VPN готов поделиться.
#БазаЗнаний
📖 В последнее время 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 готов поделиться.
#БазаЗнаний
👍4