Хью Хауорт написал обзор современных инструментов сборки — "Comparing the New Generation of Build Tools".

В статье рассказывается про esbuild, Snowpack, Vite и wmr. Esbuild — это очень шустрый сборщик, написанный на Go. Snowpack, Vite и wmr — сборщики нового поколения. Они полагаются на нативную модульную систему JavaScript, устраняя шаг сборки приложения во время разработки.

Snowpack позволяет подключать и гибко настраивать разные сборщики для production-сборки проекта. Vite, наоборот, исповедует принцип zero-configuration, предоставляя набор настроек, которые подойдут большинству проектов. Wmr — самое лёгкое решение, но из коробки поддерживает только React и Preact. Esbuild в этом сравнении стоит особняком, так как это обычный, но очень быстрый сборщик.

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

#bundle #tool

https://css-tricks.com/comparing-the-new-generation-of-build-tools/

Варун Вачнар пообщался с разработчиками из 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/

Два дня назад вышла новая мажорная версия текстового редактора Sublime Text. Бенджамин Шааф рассказал о его новых возможностях — "Sublime Text 4".

Теперь Sublime Text поставляется со встроенной поддержкой TypeScript, TSX и JSX. Есть все основные фичи: подсветка синтаксиса, автодополнение кода, переход к объявлению.

Переработан UI приложения. Теперь его компоновка происходит на GPU, улучшая отзывчивость интерфейса при работе с большими проектами. Также немного обновили дизайн и добавили поддержку автоматической смены тем.

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

Был улучшен движок подсветки синтаксиса. Упрощено открытие вкладок в режиме split view. Добавлена нативная поддержка Apple Silicon и Linux ARM64.

#tool #programming #announcement

https://www.sublimetext.com/blog/articles/sublime-text-4

Недавно вышла новая версия Jest. Тим Секингер рассказал о новинках релиза — “Jest 27: New Defaults for Jest, 2021 edition”.

— В интерактивном режиме появилась возможность поочерёдного перехода по упавшим тестам.
— Инлайн-снапшоты теперь можно использовать без подключения Prettier.
— Инициализация тестов была ускорена на 70%.
— Продолжается работа над внедрением ESM. Её поддержка уже есть в кастомных раннерах, репортерах и watch-плагинах.
— Добавлена асинхронная поддержка transform для эффективной транспиляции с помощью esbuild, Snowpack и Vite.
— Реализации функций describe, it, beforeEach заменена соответствующими реализациями из jest-circus.
— Теперь используется новая реализация для мока таймеров. В очень редких случаях они могут сломать тесты, но есть возможность отката на старую версию с помощью jest.useFakeTimers("legacy").
— Изменено дефолтное тестовое окружение на node. Для возврата к старому поведению нужно использовать опцию "testEnvironment": "jsdom".
— Изменена логика работы функции done. Её коллбек нельзя вызвать более одного раза и нельзя комбинировать вызов done с возвратом промиса. Блоку describe запрещено возвращать какие-либо значения.
— Модули, загружающиеся с помощью опций testEnvironment, runner, testRunner и snapshotResolver, теперь транспилируются.
— Удалены задеприкейченные методы jest.addMatchers, jest.resetModuleRegistry, jest.runTimersToTime.

#testing #tool #release

https://jestjs.io/blog/2021/05/25/jest-27

jsc — интерпретатор JavaScript, встроенный в macOS

Крейг Хокенберри написал статью про малоизвестную утилиту jsc — "jsc: My New Best Friend".

Все устройства с macOS идут в комплекте с jsc — интерпретатором JavaScript на базе движка JavaScriptCore. Бинарник находится по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc. В cтарых версиях macOS по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc.

Крейг пишет, что jsc используется командой разработки WebKit для запуска тестов. Возможно, что это так, но я не смог найти про это информацию. Нашёл, что jsc используется для поддержки выполнения скриптов в Swift- и Objective-C-программах.

Утилита jsc — это не замена Node.js, но она может оказаться полезной для запуска простых скриптов, когда Node.js под рукой нет.

#tool #javascript #macos

https://furbo.org/2021/08/25/jsc-my-new-best-friend/

Анализ JS-бандла с помощью Lighthouse Treemap

Сиа Кармаленгос написала статью про новый инструмент анализа JS-бандлов, доступный в Lighthouse — "Explore JavaScript Dependencies With Lighthouse Treemap".

В последних версиях Lighthouse появилась новая фича — визуализация JS-бандлов с помощью Treemap. Если вы знакомы с webpack-bundle-analyzer, то уже можете представить себе новый инструмент. Основное отличие Treemap в Lighthouse — возможность анализа бандлов любых сборщиков. Если сборка происходит с генерацией сорс-мапов, то в Treemap будут отображаться названия модулей. Но самая интересная функция — оценка покрытия кода. Если включить опцию "unused bytes", то можно оценить сколько кода было загружено, но не выполнено.

Поддержка Lighthouse Treemap уже доступна в сервисе PageSpeed Insights, Lighthouse Node CLI и Chrome Canary.

#tool #js #bundle #performance

https://sia.codes/posts/lighthouse-treemap/

Интерграция VS Code с Edge DevTools

Разработчики Edge рассказали о новой экспериментальной фиче для подключения VS Code в качестве основного редактора DevTools — "Opening source files in Visual Studio Code".

Если включить интеграцию с VS Code, то при открытии исходного кода проекта в инструментах разработчика между экземпляром редактора и DevTools установится двусторонняя связь. При редактировании файлов в VS Code изменения не только будут сохраняться на диск, но и будут автоматически пробрасываться в DevTools с автоматическим обновлением открытой страницы. И, наоборот, при редактировании стилей на вкладке Elements все изменения будут автоматически пробрасываться в редактор.

Подключить VS Code можно в экспериментальных опциях DevTools: Settings > Experiments > Open source files in Visual Studio Code.

#tool #dx #edge

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode

Релиз Parcel 2

Parcel — это сборщик, который можно использовать без каких-либо настроек. Все опции используют разумные значения по умолчанию. Точка входа для сборки — основной HTML-файл приложения или сайта. В новой версии была улучшена производительность сборки, реализована новая система плагинов, три-шейкинг, код-сплиттинг, улучшение сборок библиотек, улучшена работа HMR и многое другое.

Значительно улучшена производительность сборки благодаря новому компилятору, написанному на Rust. В его основе лежит swc. Использование компилируемого языка уменьшило время инициализации кода и решило проблему медленной сериализации больших AST-объектов. Сборка теперь работает в десять раз быстрее и в три раза быстрее при использовании Terser.

Реализована новая система плагинов, которая делает Parcel полностью расширяемым. Она позволяет использовать Parcel как для небольших проектов, так и для серьёзных проектов со сложными требованиями к сборке.

Три-шейкинг включён по умолчанию. Он работает для ESM, CommonJS, динамических импортов и CSS-модулей. Есть диагностика проблем три-шейкинга, которую можно включить с помощью флага --log-level verbose. Работает автоматический код-сплиттинг с выносом общих модулей в разделяемые бандлы. Также в Parcel по умолчанию включена поддержка паттерна module/nomodule для улучшения производительности загрузки кода.

В production-режиме в Parcel включена lossless-оптимизация JPEG- и PNG-изображений. Она уменьшает объём изображений, не снижая их качество. Также появилась полноценная поддержка SVG с автоматической оптимизацией с помощью SVGO.

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

#bundle #tool #release

https://parceljs.org/blog/v2/

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

Лина Сохони, Эдди Османи и Кэти Хэмпениус написали статью о лучших практиках подключения сторонних виджетов — "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/

Моделирование пользовательских сценариев в Lighthouse

Брендан Кенни рассказал про Flow API Lighthouse, благодаря которому становится возможен комплексный анализ страницы — "Lighthouse user flows".

Доступ к Flow API возможен из puppeteer-скриптов. Он позволяет протестировать загрузку страницы с прогретым кешом, подготовить страницу перед прогоном проверок и отследить метрики производительности на заданном промежутке времени.

Flow API — это большой шаг для Lighthouse, так как теперь в лабораторных условиях можно получить полноценные значения метрик, зависящих от пользовательского ввода. Например, сейчас можно открыть страницу и программно вызвать прокрутку, отслеживая изменение метрики CLS. По умолчанию Lighthouse не отслеживает изменение CLS и отображает значение, полученное сразу после загрузки страницы.

#performance #tool

https://web.dev/lighthouse-user-flows/

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/

Statoscope — тулкит для анализа Webpack-бандлов

На Smashing Magazine был опубликован транскрипт доклада Сергея Мелюкова про тулкит для анализа Webpack-бандлов — "Statoscope: A Course Of Intensive Therapy For Your Bundle".

С помощью Statoscope можно сравнить две сборки между собой и получить информацию об увеличении размера бандла, времени сборки и т.п. Он помогает обнаруживать дубликаты пакетов в бандле и, в отличие от webpack-bundle-analyzer, показывает конкретные файлы, в которых происходит импорт этих пакетов. Его можно использовать в CI для блокирования пулл-реквестов, если какой-либо критический показатель выходит за установленное порог. В нём поддерживается создание кастомных отчётов с помощью Jora и DiscoveryJS.

Statoscope используется в проектах Яндекса: в Яндекс.Маркете, Яндекс.Картах, Кинопоиске. Также он используется в библиотеке size-limit.

#webpack #bundle #tool

https://www.smashingmagazine.com/2022/02/statoscope-course-intensive-therapy-bundle/
https://www.youtube.com/watch?v=aAkmZ0gMYQ8 (доклад на русском)

Time-travel debugging в Svelte

Сэм Ван Тассел рассказал про DeLorian — новый инструмент для упрощения отладки Svelte-приложений — "Time Travel Debugging in Svelte with DeLorean".

DeLorian — это расширение Chrome DevTools для отслеживания изменений состояния приложения во времени (time-travel debugging). При изменении состояния создаётся снапшот, к которому можно вернуться в любое время. Перемещение по истории работает также как в Redux DevTools. Также DeLorian отображает дерево компонентов и связанные с ними переменные.

На данный момент есть ограничения: корень приложения должен находится в DOM-элементе с id="root", приложение должно быть собрано в dev-режиме и работать локально.

#svelte #debug #tool

https://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474