Массовая оптимизация картинок сервисом TinyPNG

📖 Оптимизация изображений для веба – это один из важных шагов ускорения работы сайта или сервиса. Динамические картинки, которые добавляются через админку, должны обрабатываться бекендом в момент их добавления. Но кроме динамики, часто на страницах используется и статика. Под сборки верстальщиков есть много плагинов, которые выполняют оптимизацию изображений, но они все уступают профессиональным программам и сервисам. Мы много перепробовали различных вариантов и самым идеальным для себя выбрали TinyPNG. Качество изображений совсем не страдает, а уровень оптимизации удивляет – часто картинки удается сжать на 60-75% по весу.

У сервиса есть ряд ограничений. Через веб-интерфейс одновременно можно сжать не более 20 картинок, а один файл не может превышать 5мб. Но если обращаться по api к сервису, то таких лимитов нет. Бесплатное ограничение на использование api составляет 500 обработок в месяц. Этого хватает, если каждый дизайнер и верстальщик использует свой индивидуальный аккаунт (api key).

Чтобы было удобней пользоваться сервисом по апи, набросали скрипт на go lang и скомпилировали его под Windows и MacOs. Теперь пользоваться сервисом TinyPNG стало в разы быстрей и удобней, приложение за счет многопоточности go lang, параллельно обрабатывает всю пачку картинок. Так же приложение не ломает структуру папок, если картинки разложены по разным директориям. Достаточно перенести все папки с изображениями в служебную директорию input, запустить скрипт и забрать такую же структуру папок и файлов из output-а.

📌 Подробная инструкция по использования готового приложения у нас собрана с описаниями и скринами в ридми открытого репозитория: README.md.
Так же открыли и исходники, если кто-то решит доработать приложение под свои нужны: репозиторий.

❗️P.S. В конфиге тестовый ключ от TinyPNG, он бесплатный – лимит 500 обращений в месяц. Сильно не балуйтесь, это для тестов и посмотреть, как работает приложение. Перед использованием нужно создать личный ключ.

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

Оптимизация видео под Web

📖 В продолжение темы прошлого поста, займемся еще немного оптимизацией. На этот раз обработаем видео, чтобы работало шустрей на страницах сайта. В первую очередь, чтобы ролик вообще работал, он должен иметь формат mp4 – этот формат поддерживается всеми браузерами, как десктопными, так и мобильными. Далее можно порезать вес файла за счет уменьшения его размера до 720, на страницах сайтов этого более, чем достаточно. И еще по мелочам можно сэкономить веса: уменьшить битрейт звуковой дорожки, вырезать лишние кадры и немного пожать качество видео.

Все вышеописанные манипуляции легко выполнять с помощью FFmpeg – это мощный инструмент для работы с аудио и видео файлами. С его помощью можно легко и быстро обработать файлы. FFmpeg кроссплатформенный, что позволяет использовать этот пакет библиотек как на серверах с ОС linux, так и на любом рабочем компьютере с windows или macOs. Все действия можно выполнять из консоли, далее приведен пример запроса и расшифрованы все его куски.

📌 Команда с пример обработки видео input.avi, на выходе получится оптимизированный файл output.mp4:

ffmpeg -y -i  input.avi -filter:v scale=-2:720 -acodec aac -b:v 128K -q:v 10 -r:v 24 -crf  30 -movflags +faststart output.mp4

📌 Расшифровка модификаторов команды:
– разрешаем перезаписывать выходные файлы, если такой уже существует: -y
– заменяем аудио кодек: -acodec aac
– уменьшаем битрейт звука до 128 кбит/с: -b:v 128K
– ресайзим до 720 по ширине, высота пропорционально расчитывается. Тут важно, чтобы были четные значения, иначе ffmpeg не сможет сделать ресайз: -filter:v scale=-2:720
– Уменьшаем fps до 24 кадров: -r 24
– Задаем контроль качества виодео на середине (30 из 51 возможных): -crf 30
– И переносим мета-данные в начало видео, для ускорения прогрузки первых кадров: -movflags +faststart

#БазаЗнаний

Четырехбайтовые символы в базе данных MySQL

📖 В 2017 году, я впервые столкнулся с проблемой хранения эмодзи в базе данных, даже статью про это писал: ссылка. Тогда набор смайликов был совсем небольшим – грустные и веселые мордочки, сейчас же их словарь ощутимо пополнился. И встретить такие символы (да, это символы) можно почти везде.

Особенно часто эмодзи встречаются в соц.сетях, в том числе и телеграм. На скрине ошибка, которую поймали в телеграмовском боте, его только запустили и находится в режиме тестового запуска. Прозевали и не проверили кодировку соединения с базой данных. В самой БД, таблицах и полях корректная кодировка – utf8mb4. Но коннект в коде не обработан, по умолчанию соединение с MySql использует utf8. Ошибку выловили и исправили быстро, но пользователь понервничал, не мог запустить бота.
Обычные символы из алфавита имеют 3-х байтовую кодировку, а эмодзи уже не помещается, ему нужно 4 байта. Соответственно utf8, который работает только с 3-байтовыми символами, уже не справляется.

🔴 Важно проверять данные, которые приходят на бекенд. Должна быть валидация, как значений, так и их формата. Например, если экранировать эмодзи, то и в таблицу с кодировкой utf8 можно записать данные.

🔴 Но лучше не ограничивать пользователей в наборе символов и при работе с соц.сетями, комментариями и другими полями, где доступны эмодзи, нужно это учитывать и использовать кодировку utf8mb4.

#КодРевью

Пиздосометр – измеритель уровня пиз*еца

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

[…]

📌 Cтатья получилась большая и не влезает в одну запись телеграма. Полный текст с фото и видео можно прочитать и посмотреть на VC: ссылка на полную статью.

[…]

Поздравляю всех с «Днем программиста», желаю не отчаиваться и не опускать руки. Если долго мучаться, то что-нибудь обязательно получится или подвернется счастливый случай!

❗️P.S. Присылайте свои идеи, как можно оцифровать уровень пиздеца. Предложения можно писать в комментарии или мне в личку. Вдруг всем миром, все-таки придумаем идеальные параметры оценки и запустим автоматическую версию девайса, чтобы он сам начала шевелить стрелкой, опираясь на максимально релевантные показатели!

#Юмор #Статьи

Мониторинг бекапов

📖 Работает сайт месяц, второй, год. Все хорошо, контент пополняется, фичи добавляются. Работает и проблем нет. Логи пишутся, коммиты пушатся, бекапы создаются. А потом бац и все упало – хостинг умер или жесткий диск на сервере; ну или что-то более реальное: релиз выпустили, а он вместо того, чтобы покрасить кнопку, снес папку с контентом, которая без контроля версий; или таблица в базе данных не так обновилась и вместо добавления нового поля, все записи перепутались. Бывает.
Не беда, у нас есть бекапы, сейчас достанем контентную потеряшку, да и записи в таблице БД восстановим. Тээкс, а бекапы-то мертвые. Архивы с файлами битые, дампы уже 3 недели не актуализировались. Что за дела? Место на хостинге закончилось пару недель назад и не удается создать корректный архив, а крон исправно дергает скрипты в попытках создать резервные файлы. Вроде, и логи добавлялись на бекапы, но кто их смотрит, когда все хорошо? Вот сейчас залез, глянул – ага, ошибка создания архива из-за нехватки места.

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

#Мысли

CSS, который «убивает» браузер

📖 Вспомнил старый код, который попался в прошлом году, во время проверки тестового задания. Случай интересный и очень показательный. Это не логика, а верстка. Причем просто статика, без js-фреймворков. Но статика настолько занятная, что я не поленился откопать архив с исходниками, чтобы сделать скрины для поста. На скриншоте видна нагрузка – потребление ресурсов центрального процессора(ЦП) и графического процессор(ГП). Скрины с MacBook Air на M1 – шустрый компьютер, если не запускать ничего тяжелого, то нагрузка не поднимается выше 20-25%. А тут статичная страница просто при загрузке стала отъедать 70-100% всех ресурсов.
Первый раз открыв страницу, браузер подвис на 1-2 секунды. Сперва не понял, что случилось. Перезагрузил. Лаги повторилось. Полезли разбираться в чем дело и наткнулись на стиль с восемью тенями(drop-shadow) в одном фильтре(filter).

🔴 Тени очень требовательны к ресурсам. А когда их добавляется сразу десяток на один элемент, процессору становится очень тяжело все это дело просчитать и отрисовать. Такой набор drop-shadow появился не просто так в стилях. Это скопировано из фигмы. Дизайнеры, чтобы добиться идеальной тени, накладывают их целую стопку, каждую под своим углом и разной интенсивности. Выглядит красиво, но процессору такое не нравится. Пользователям сайта, думаю, тоже не очень приятно ловить заморозку браузера на несколько секунд. Нужно все эти тени собрать в одну, другого хорошего решения нет.
Можно добавить стиль transform-style: preserve-3d для аппаратного ускорения, но это не спасет от 8 теней, браузер все равно будет зависать, слишком много математики.

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

#КодРевью

Мониторинг почтовых форм

📖 На любом коммерческом сайте есть контакты и формы сбора лидов – контактов. Если утрировать и отбросить всю мишуру, то можно сказать, что сайты создаются только ради этих двух блоков. Поэтому очень важно держать эти инструменты всегда в рабочем состоянии. Если с контактами все понятно, достаточно поддерживать их актуальность, то с формами сложней. Они могут быть сильно разные по функционалу и запись лидов там тоже разная. Начиная от письма на почту, заканчивая сделкой в CRM. Серьезные интеграции не всегда оправданы и зачастую даже больше организации останавливаются на приеме заявок по email.
В итоге мы имеем большое количество сайтов, где по разным страницам разнесены формы сбора контактов, уведомления с которых отправляются на email. Но почтовые отправки не стабильные, есть ряд причин, по которым письма могут перестать отправляться менеджерам: сервер попадают в бан, smtp сбоит или меняются настройки, банально не оплачен smtp и тд. Все эти проблемы решаемы, но их сложно вовремя заметить.

📌 Чтобы своевременно реагировать на проблему, мы написали скрипт, который проверят внутренний почтовый ящик на наличие писем. Сам же почтовый ящик-мониторинг добавляем в копию получателей для каждой формы, нуждающейся в проверке. То есть мы не надеемся на условия ответа smtp или простого mail. Это может быть ложный статус, если письмо принял smtp-сервер, но не отправил из-за внутренних проблем или попадания в спам.
Скрипт мониторинга каждый час подключается к почтовому сервису по IMAP-протоколу, проверяет наличие новых писем и делает их выборку по маске в теме: «Название сайта – имя формы». Дальше дело техники – посчитать письма и записать данные в БД с разбивкой по доменам и названиям форм. А чтобы держать руку на пульсе, каждое утро собираем и отправляем отчет ботом себе в телеграм, примеры на скрине. Нам достаточно двух уведомлений: отчет по формам за вчерашний день и сводка по сайтам/формам, с которых уже три дня не приходили письма, это повод проверить форму на работоспособность.

#Кейсы

Плагин для Google Chrome, который определяет уникальный css-селектор

📖 У нас в команде не только разработчики, но и маркетологи и дизайнеры. Им тоже иногда требуется подмога с автоматизацией. Хочу поделиться одной из таких наработок. Дизайнеры, кроме макетов, частенько собирают сайты на конструкторе Tilda. Удобный инструмент для создания промо-лендингов, которые нужно быстро запустить. Если не брать готовые шаблоны, а собирать страницу «руками», то получаются красивые решения. Но кастомная сборка зачастую ведет к тому, что нужно дописывать css и js, готовых блоков и настроек не всегда хватает в таких случаях. Тильда – это конструктор, поэтому все селекторы элементов там сгенерированные, в консоле браузера сложно найти уникальный или наоборот такой, чтобы применить стили ко всем похожим блокам. Чтобы упростить жизнь дизайнерам, мы написали небольшой плагин для браузера Chrome.

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

📌 Установка:
– Скачать плагин: ссылка
– Скачать и распаковать архив
– Перейти в плагины хрома, можно по ссылке: chrome://extensions/
– Нажать «Загрузить распакованное расширение» и выбрать папку куда распаковался архив
– Можно закрепить плагин в браузере, чтобы было удобней пользоваться

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

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

Автоматическая установка SSL-сертификата Let’s Encrypt

📖 Что такое SSL и защищенное https-соединение никому не нужно рассказывать, это давно стало обязательным для сайтов и сервисов. Но, как автоматически установить сертификат, можно показать, поскольку есть много способов. Расскажу про тот, которым мы пользуемся для всех тестовых сайтов и некоторых клиентских, где не критично применять бесплатные сертификаты. Не всем нужен платный SSL с подтверждением организации (OV или EV).

Большинство хостингов предоставляют возможность установить бесплатный Let’s Encrypt из панели управления. Но если пользоваться VPS, VDS или выделенным сервером, то все настройки нужно выполнять «руками», в том числе и по настройке сертификатов. Самый простой вариант – это сходить на сайт Let’s Encrypt, подтвердить домен, получить ключи сертификатов и установить их. Такой сертификат живет 3 месяца, потом все по новой.

Чтобы не мучаться в ручном режиме, можно автоматизировать процесс с помощью Certbot – бесплатный сервис. Официальный сайт с инструкциями тут. Установку под каждую операционку и веб-сервер рассказывать не буду, на сайте есть. Показываю на примере веб-сервера nginx и ОС Ubuntu.

📌 Установка certbot:
– Устанавливаем snap: sudo apt install snapd
– Устанавливаем certbot: sudo snap install --classic certbot
– Добавляем симлинк: sudo ln -s /snap/bin/certbot /usr/bin/certbot

📌 Использование:
Вызываем certbot командой: sudo certbot --nginx.
Далее запустится установка, где нужно выбрать домен, для которого сгенерируется и настроится сертификат – на скрине пример. Все остальное проходит в автоматическом режиме.
Перевыпуск сертификатов: sudo certbot renew --dry-run

❗️После установки сертификата, certbot предлагает добавить редирект с http на https в конфиге веб-сервера. Это тоже удобно, можно использовать. А самое главное, что все установленные сертификаты, будут автоматически продлеваться без нашего участия. Certbot висит на кроне и сам следит, когда нужно перегенерировать сертификаты.

#БазаЗнаний

Реклама от провайдера – первая встреча

Вспомнил историю, которая приключилась в 2018 году, она как раз в тему недавнего поста про установку SSL-сертификатов: пост тут.

Но я опять перегнул палку, получился не короткий пост-заметка, а статья на 7 тыс символов. Лимит телеграма 2 тыс символов на пост с картинкой или 4 тыс без нее.
Поэтому выкладываю полный пост на VC, вот ссылка: читать всю историю.

📖 Кусочек для затравки:
Решили выловить отображение рекламы, чтобы хоть как-то понять в чем дело. Расспросили все характеристики устройства, на котором смотрят сайт менеджеры клиента. У нас в офисе ни у кого подобных моделей нет. Начали мучать знакомых, один нашелся – скидываем ссылку, а там тоже полный порядок. Значит дело не в девайсе.
Что может быть еще? Пришла еще идея – вдруг вирус по геопозиции или ip определяет город и только там показывает рекламу. Заказчик из столицы, а мы в Брянске. Новая зацепка, продолжаем расследование и узнаем ip клиента. Вместе со скрином ip-шника нам досталась полная расшифровка интернет-соединения, на которой в том числе и провайдер указан – Ростелеком. Для проверки гипотезы объясняю клиенту как установить и включить VPN для смены ip. И вот оно, при подключении через VPN, все хорошо – рекламы нет. Снова лезем в исходники сайта и пытаемся найти хоть что-то связанное с ip или каким-то еще определением местоположения. Но ничего криминального нет. Тупик.

📌 Полный текст истории: почитать.

#Мысли

Code Review. Запросы к БД в цикле

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

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

🟡 В идеале код стоит переписать: убрать их вьюхи запрос и перенести его глубже в логику – в модели. Во вьюхах нужно избегать запросов к БД и обработки данных. Логика не должна сюда попадать.

🟢 Это код вьюхи Laravel, в котором используется шаблонизатор Blade. Движок шаблонизатора позволяет использовать вставки php, но в документации об этом пишут, что только в крайних случаях. Поэтому лучше избегать такие вставки и пользоваться синтаксисом самого Blade.

#КодРевью

Модуль символа рубля за 999 рублей

📖 Пришел к нам в этом году заказчик с проблемой – взломан сайт, совсем не работает, с сервера шли почтовые рассылки и DoS-атаки. После чего хостинг-провайдер заморозил аккаунт до выяснения и устранения причин проблем.

Пошли смотреть. Сайт на Битрикс старой версии, с 2014 или 2015 года не обновлялось ядро CMS. Битрикс популярный в России, таких крупных аналогов нет и является отечественной разработкой. Поэтому многие государственные или около государственные структуры используют его для своих сайтов, чтобы не пользоваться импортными. Но то, что разработчик php, на котором написан Битрикс, родом из Дании, а компания Zend в штатах находится, это уже совсем другая история.

В связи с последними событиями, участились атаки на гос.сайты, и соответственно Битриксу досталось в первую очередь. За последние 2 года в нем нашлось прилично новых уязвимостей, и вспомнили все старые «дыры». Волной взлома затронуло и «гражданские» сайты. Один из таких сайтов нам и пришлось реанимировать.

Процесс починки тоже интересный, но его лучше отдельно рассказать, как-нибудь в другой раз. Сайт восстановили, вирусные скрипты удалили, Битрикс обновили, версию php подняли – все ок, полный порядок. Сайт как новенький.

Пока копались с сайтом, наткнулись на интересный модуль – «Символ рубля». Сперва не поняли, что это за штука. Посмотрели настройки, а там из всего доступного, только выбор десятка разных шрифтов и пара вариаций отображения символа рубля – ₽. Удивились, посмеялись, но ладно. Сайт не молодой, в 2015 году шрифты толком не поддерживали этот символ, приходилось вставлять с помощью svg. Но это не на столько сложная процедура, чтобы писать целый модуль под это дело. Загуглили автора, оказывается это целая компания занималась разработкой, да еще и продает решение за 999 рублей. И если верить счетчику на сайте, то модуль продан больше тысячи раз.

😁 Ну и вишенка на торте – на самом сайте продавца, в стоимости модуля, не выводится символ рубля, а подписано «Руб.».

Пруф: ссылка на модуль.

#Юмор

Мониторинг SSL-сертификатов

📖 Астрологи объявили неделю постов про SSL. Третий пост за неделю. Это не специально, под руку попадаются. Сегодня, когда пишу этот пост (20.09), как раз пришла уведомлялка от рабочего бота, что завтра последний день, когда живет SSL на одном из сайтов, за которыми мы приглядываем.

Большинство сертификатов продлеваются автоматически – хостингом или certbot-ом. Вот тут про certbot писал: ссылка на пост. Но есть домены, к которым нет доступа – заказчик не дает пароль к регистратору домена. По разным причинам, начиная требованиями безопасности, заканчивая тем, что у клиента вредный сисадмин. Проблема с такими доменами в том, что домен связан с хостингом, к которому у нас есть доступ только через А-запись. На некоторых хостингах в таких случаях не работает автоматическое продление SSL-сертификатов, поскольку DNS не прописаны. А certbot-а не можем запустить, потому что доступа на его установку нет на хостинге. Поэтому пользуемся тем, что есть и выкручиваемся разными способами.

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

И поскольку сайтов не мало, уследить за всеми сложно, чтобы не забыть обновить сертификат. Во избежание ситуаций, когда пропустили дату завершения, мы добавили телеграм-боту функцию мониторинга. Когда время жизни SSL подходит к концу – менее 7 дней, бот начинает ежедневно по утрам присылать мне в ЛС и общую группу разработчиков уведомление с названием сайта, для которого пора заняться генерацией. А раз функцию добавили боту, то и все остальные домены туда засунули проверяться, вдруг где-то откажет certbot или произойдет сбой у хостера.

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

#Кейсы

JS-плагин для работы с целями метрики

📖 По завершению разработки, сайт сам по себе не несет никакой пользы, если его никто не видит. Всегда должна быть следующая итерация по привлечению посетителей – seo-оптимизация или/и запуск рекламы. Но каким бы способом сайт не «раскручивали», нужно отслеживать и понимать действия пользователей. Чтобы на основе этих данных доработать сайт или внести корректировки в продвижение. Отслеживать посетителей можно большим количеством инструментов, но основной – это Яндекс.Метрика.

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

JS-события нужно вызывать «руками» через код, отлавливая конкретное действие пользователя на сайте. Это типовая задача, но каждый раз нужно писать обработчики. Чтобы упростить себе жизнь, написали плагин, который имеет набор самых ходовых событий и достаточно только вызывать их с нужным селектором или параметром.
Плагин не сложный, но может кому-нибудь облегчить жизнь. Поэтому выложили его исходники в открытый доступ и оформили как пакет для npm.

📌 Плагин работает со старой и новой версией счетчиков.
И умеет обрабатывать:
– клик на элемент
– установку фокуса в инпут/текстарею
– доскралливание страницы на определенное количество пикселей
– доскралливание страницы до элемента
– вход на определенную страницу, конкретный урл
– вход на определенную страницу, по вхождению урла
– уход с определенной страницы, конкретный урл
– уход с определенной страницы, по вхождению урла

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

❗️Если есть идеи или предложения по добавлению новых обработчиков – пишите мне в ЛС или в комментарии к посту.

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

Упаковать в архив измененные файлы из последнего коммита

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

К чему я это? Вот прямо сейчас случилась ситуация, что нужно скачать файлы из последнего коммита. Проект есть в репозитории, на боевом и тестовом серверах, и на некоторых рабочих компьютерах. У меня нет скаченного репозитория, а файлы нужны. Можно сходить в веб-интерфейс гитлаба и вытащить руками нужные файлы, но коммит не маленький, копаться можно минут 5-10, пока файлы по одному скачаю. К тому же есть способ быстро упаковать файлы из нужного коммита сразу в архив. Заодно и пост написать можно 😁

📌 Чтобы упаковать в архив файлы, которые редактировались в последнем коммите, нужно знать два хеша коммитов – последний и предпоследний, чтобы сравнить изменения и узнать имена файлов, для последующего их архивирования.
Для этого выполняем команду: git log
Далее вызываем команду получения имен файлов с изменениями и архивацию с сохранением структуры папок, внутри которых хранятся файлы:

git diff --name-only хеш-последнего-коммита хеш-предпоследнего-коммита | tar -czf files.tgz -T -

Дальше остается только скачать архив с сервера. Можно через ftp/sftp менеджер подключиться. Или через консоль доделать, вызвав scp:

scp [имя пользователя]@[адрес сервера]:[путь к файлу] [путь к файлу на локальном компьютере]

#БазаЗнаний

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 миллионов символов, таких ссылок не встречал.

#КодРевью