Телеграм-каналы

Настройки без страха и упрека

#backend #db #models #structures

При разработке портальных решений с личными кабинетами посетителей мы сталкиваемся с необходимостью реализации как персональных, так и общих настроек сайта.

Модель данных Entity-Attribute-Value позволяет для любой сущности создавать неограниченное количество свойств и заполнять их значениями нужных типов.

Например, пользователь в разделе «Профиль» может выбрать удобный для него формат даты или запретить показ рекламы на сайте. Тогда настройка «Формат даты и времени» будет иметь тип select — одиночный выбор значения из списка. А параметр «Показывать рекламу» будет хранить значение «Да» или «Нет» и иметь тип boolean. Можно реализовать и другие типы: number, string, text и даже multiselect.

Сложные типы настроек, такие как select и multiselect, имеют предустановленные списки значений, которые хранятся в таблице config_variant. Установленные значения настроек хранятся в таблице config_value. Таблица config содержит информацию об атрибутах сущности, которые представляют собой непосредственные настройки. Для их группировки применяются категории, которые хранятся в таблице config_category.

Для конкретной настройки есть возможность указать классы валидаторов и параметры их конфигурации. Информация о каскаде валидаторов хранится в поле validators и имеет тип JSON.

В некоторых случаях можно пренебречь нормализацией БД в угоду удобства. Как альтернативное решение хранения вариантов выбора можно рассматривать упаковку их в JSON-поле таблицы config.

EAV дает возможность разработчику гибко выстраивать CRUD для управления настройками, соблюдая поддержку целостности данных на уровне СУБД. Такая модель хранения легко ложится в реализацию слоя приложения практически любого современного фреймворка и покрывается абстракциями ORM для удобства работы.

Сколько нужно глаз тестировщику

#qa #frontend

«Я открыл IE 6 на MS Windows XP, и ваш выпадающий список стал невыпадающим» — клиент.

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

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

Для зеркального выполнения действий с функциональными блоками сайта на разных устройствах и браузерах мы используем Browsersync. Это инструмент open source, разработанный на Node.js.

Применение подобных инструментов значительно экономит время тестирования продукта и позволяет не отвлекаться QA-специалисту на выполнение промежуточных действий, таких как обновления страницы или вставка URL-адреса на другом устройстве. Все это влияет на качество продукта в релизе и степень удовлетворенности конечных пользователей, а главное — на настроение заказчика.

CDN или нет — вот в чем вопрос

#frontend #react #nextjs

При масштабировании frontend-приложений на фреймворке Next.js нам часто приходится размещать статические файлы сборки на CDN-ресурсах. К таким файлам относятся бандлы JS/CSS и элементы дизайна в виде медиафайлов.

В Next. js предусмотрен стандартный механизм управления адресом хранения статических файлов приложения. Через параметр assetPrefix можно задать префикс, который будет использован при формировании пути к ассетам. Установить значение параметра можно в файле next.config.js.

С помощью переменных окружения можно управлять префиксом, подменяя его для различных сред развертывания.

Для тестового окружения переменная среды ASSET_PREFIX в .env-файле будет пустой, а для промышленного — будет содержать URL-адрес CDN-сервиса.

Например, в Stylus можно использовать префиксы при формировании адресов таким образом.

А в компонентах переменная окружения будет доступна из свойства env объекта process.

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

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.