Варун Вачнар пообщался с разработчиками из Adobe, BBC, Twilio, Shopify, Peloton и обобщил подходы, которые они используют при тестировании UI — "How to actually test UIs".

В статье рассказывается о подходах тестирования интерфейсов, создаваемых с помощью компонентного подхода. Для обособленного тестирования компонентов команды используют Storybook, для тестирования поведения компонентов — Testing Library, для тестирования доступности — Axe, для E2E-тестов — Playwright и Cypress.

Есть раздел про визуальное тестирование (тестирование скриншотами), но там нет упоминания инструментов с открытым исходным кодом, например, Hermione, Gemini, cypress-image-snapshot.

Как бы то ни было, статья хорошая. Очень рекомендую почитать.

#testing #tool

https://storybook.js.org/blog/how-to-actually-test-uis/

Неделю назад Себастьян Маккензи — автор Babel и Yarn — написал пост про то, что его проект Rome привлёк инвестиции.

Rome — это тулчейн с открытым исходным кодом, цель которого — консолидация разных инструментов для работы с JavaScript (пакетный менеджер, линтер, тест-раннер, сборщик и т.п.) В отличие от других инструментов Rome использует единое ядро для всех задач, ускоряя работу всего фронтенд-пайплайна.

Привлечённые инвестиции (4.5 миллиона долларов) пойдут на найм фулл-тайм разработчиков. Себастьян пишет о том, что не планирует закрывать какие-то части Rome, инструмент будет доступен без ограничений. Зарабатывать планируют на вспомогательных сервисах.

В общем, проект полетел. Очень интересно, как он повлияет на JavaScript-экосистему в будущем.

#announcement #tool

https://rome.tools/blog/announcing-rome-tools-inc/

Лучшие практики использования виджетов сторонних сервисов

Лина Сохони, Эдди Османи и Кэти Хэмпениус написали статью о лучших практиках подключения сторонних виджетов — "Best practices for using third-party embeds".

В статье предлагается использовать ленивую загрузку содержимого iframe с помощью атрибута loading="lazy". Некоторые виджеты поддерживают ленивую загрузку из коробки, например, в социальных плагинах Facebook для этого можно использовать атрибут data-lazy="true". Есть хороший совет использовать фасады для сторонних виджетов, чтобы пользователи не загружали лишний код при открытии страницы. Затрагивается тема непредсказуемого сдвига контента (Layout Shift).

Ещё ребята рекомендуют использовать готовые библиотеки для ленивой загрузки виджетов (lazysizes), создания фасадов (lite-youtube-embed, lite-vimeo-embed, react-live-chat-loader) и уменьшения непредсказуемого сдвига контента (Layout Shift Terminator).

Хорошая статья. Рекомендую почитать всем, кто интересуется темой производительности.

#performance #tool

https://web.dev/embed-best-practices/

SVGcode — конвертация растровых изображений в SVG

Томас Штайнер рассказал про новый инструмент для конвертирования растровых изображений в SVG — "SVGcode: a PWA to convert raster images to SVG vector graphics".

SVGCode — это PWA, с которым можно работать в вебе, оффлайн или установить локально. Поддерживаются все популярные растровые форматы — JPG, PNG, GIF, WebP, AVIF. Из коробки работает постеризация — уменьшение количества цветов изображения — для улучшения качества конвертации.

Приложение создано на базе WebAssembly-версии утилиты potrace. В SVGcode есть все фичи полноценных приложений: буфер обмена реализуется с помощью Async Clipboard API, доступ к файловой системе с помощью File System Access API, есть возможность регистрации SVGCode на уровне ОС в качестве обработчика файлов. Исходный код распространяется под лицензией GPL.

#svg #tool #pwa

https://web.dev/svgcode/

Создание временных сайтов с помощью Netlify Drop

Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.

Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.

Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.

#tool

https://app.netlify.com/drop

Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

Паша Злобин написал о сервисах для а/б-тестирования.

— Google Optimize закрыт с сентября 2023 года;
— Сервисы из России: Varioqub (проект Яндекса, интегрируется с Метрикой), UX Rocket, Sigma;
— У первых двух есть бесплатные тарифы;
— Паша показал процесс настройки а/б-теста на первых двух платформах (попробовать Сигму без подписания договора нельзя);
— В комментариях подсказали, что пользователи из России могут на собственном сервере поднять оперсорсный GrowthBook (есть бесплатный тариф).

#tool #ab_testing

Никита Цейковец написал, какими техническими решениями пользуются люди с нарушениями зрения.

— Опрос провели в интернете в 2023 году среди русскоязычных пользователей, поучаствовал 491 респондент. Это уже 5-й опрос, можно оценить динамику;
— 99% используют мобильные устройства, 91% десктопные. Важно обеспечить доступность мобильных приложений, но и про десктоп не стоит забывать;
— Треть респондентов не пользуется голосовым интерфейсом. Он не должен становиться единственным способом взаимодействия;
— Из платформ чаще используют Windows и Android, но доля пользователей iOS и iPadOS достаточно значима и в последние годы растёт. Растёт также интерес к GNU/Linux;
— Недоступность мобильного приложения нельзя компенсировать доступной мобильной версией сайта, пользователи предпочитают приложения;
— Проверять доступность сайтов на деcктопе следует в Chrome и Firefox, а на мобильных устройствах в Chrome и Safari;
— Конфигурации для проверки в порядке снижения приоритета. Сайты на десктопе: Chrome и Firefox с NVDA на Windows, с JAWS на Windows, Safari с VoiceOver на macOS, Chrome с Orca на GNU/Linux. Сайты на мобильных устройствах: Chrome с TalkBack на Android, Safari с VoiceOver на iOS/iPadOS;
— При тестировании доступности для слабовидящих в первую очередь стоит применять встроенные инструменты увеличения экрана и коррекции изображения. Они как правило наиболее популярны.

#accessibility #tool