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

Расширяй и властвуй вместе с Pug 🐶

#frontend #js

В Студии мы постоянно стремимся оптимизировать работу, применяя различные инструменты разработки. С недавних пор мы внедрили в корпоративные сборки для статической верстки шаблонизатор Pug.

Его основное преимущество — поддержка использования JavaScript прямо в синтаксисе шаблонов. Можно применять большое количество языковых конструкций, например переменные, классы или функции. Есть возможность делать код более модульным, разделяя его на компоненты — шаблоны и миксины.

Более того, стандартный функционал pug-шаблонов можно самостоятельно расширять. И далее мы расскажем как.

Например, нам очень хочется использовать npm-пакет classname в наших шаблонах. Реализуем его поддержку.

Поскольку Pug компилируется с помощью JavaScript в HTML, мы можем добавить необходимый функционал на этапе сборки проекта, а затем использовать его в шаблонах.

В нашем примере для автоматизации процесса расширения функционала будем использовать таск-менеджер Gulp. Для начала необходимо установить пакет gulp-pug и сконфигурировать его, как описано в документации. Затем с помощью опции locals плагина gulp-pug необходимо определить импортируемые js-переменные или функции, в нашем случае функцию cn. В шаблоне мы сможем вызывать ее из глобального контекста:

header(class=cn('header', { header_auth: auth }))

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

Как протестировать iOS и [не]разориться

#frontend #qa

Устройства под управлением Apple iOS генерируют заметную долю трафика в современном интернете. В отличие от остальных мобильных и десктопных операционных систем, все браузеры в iOS работают на движке WebKit. Причем версия движка обновляется только совместно с обновлением самой iOS. В каждой версии WebKit есть признанный список проблем и ограничений, которые так или иначе влияют на рендеринг веб-страниц и их отображение конечному пользователю. А для некоторых легаси-устройств компании Apple уже не предоставляется возможность обновления. Эти факторы сильно осложняют тестирование и отладку веб-приложений на мобильных устройствах Apple.

В Студии QA-специалисты и frontend-разработчики тестируют разрабатываемые сайты минимум в трех актуальных версиях iOS — 11 (2017), 12 (2018) и 13 (2019) — и на различных устройства — Apple iPhone и iPad. Иногда необходима поддержка и более ранних версий iOS — 9 или 10. Все это требует наличия большого количества устройств. При этом за доступ к физическим девайсам идет постоянная борьба среди разработчиков, тестировщиков и дизайнеров 😱

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

Все специалисты Студии работают на устройствах Apple iMac, операционная система которых предполагает использование среды разработки Xcode. В свою очередь, Xcode содержит приложение Simulator, эмулирующее работу iOS в macOS для мобильных разработчиков.

Внутри симулятора можно запустить веб-браузер Safari, поведение которого будет соответствовать настоящему устройству. В наличии все актуальные версии iOS под любые устройства — даже часы и TV 😎 На одном компьютере разрешается запуск нескольких симуляторов, что может сказаться на производительности вашей операционной системы 😁

На Stackoverflow можно найти удобный список версий Xcode для скачивания и инструкцию по управлению списком устройств.

MS Outlook. Проверяй без отправки

#qa #frontend

MS Outlook, так же как и Internet Explorer, требует особого внимания со стороны QA-специалистов и, конечно же, frontend-разработчиков.

Иногда крупные клиенты требуют полной поддержки MS Outlook при верстке HTML-писем. Этот инструмент со своим встроенным почтовым клиентом является корпоративным для них и обязывает работать именно с ним.

Рассмотрим несколько вариантов организации процесса тестирования корректного отображения писем в MS Outlook.
— «В лоб» — отправляем HTML-письма с одного ящика на другой, работа с которым реализована через Outlook. Это долго, не очень удобно, требует много действий и ожидания доставки писем.
— Можно воспользоваться услугами специальных SaaS, занимающихся организацией маркетинговых email-рассылок. Некоторые такие сервисы, помимо самих рассылок, предоставляют и инструменты для тестирования HTML-писем. Например, Litmus. Основной недостаток — стоимость сервиса, особенно когда у вас нет постоянных потоков верстки писем и организации маркетинговых рассылок.
— Самый интересный и неочевидный 😎 — открыть HTML-документ в Outlook без отправки/приема его в виде письма.

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

Приведем пример реализации лайфхака с открытием HTML в Outlook 2013. Необходимо выполнить следующие действия:
1. Создать новое сообщение (Главная → Создать сообщение).
2. Вызвать диалог прикрепления файла (Сообщение → Вложить файл).
3. Указать путь к HTML-документу, затем рядом с кнопкой «Вставить» раскрыть выпадающий список и выбрать пункт «Вставить как текст».

Начиная с MS Outlook 2016, механика прикрепления вложений изменилась. Для использования прежнего функционала необходимо настроить панель быстрого доступа, поместив на нее элемент «Вложить файл» (без многоточия). Файл → Параметры → Панель быстрого доступа / Настроить ленту.

Сильно заморочились? Зато теперь мы можем отображать HTML-исходники для письма прямо в MS Outlook, не отправляя его 😊.

Для минимизации возможных проблем с Outlook советуем изначально верстать письма с помощью специализированных фреймворков. В Студии для верстки писем мы используем сборку на основе Foundation for Emails.

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

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

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

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