Новости 512 #149

В этом выпуске: эра ES-модулей, применение ES-модулей, разбор расчёта высоты и ширины элементов, обновление LTS-версий Node.js, WebdriverIO 7 и отделение Rust от Mozilla.

Интересные публикации

В апреле этого года прекращается поддержка 10-й LTS-версии Node.js. Чем примечательно это событие: 12-я версия и выше полностью поддерживают ES-модули. Сперва краткий экскурс в историю. Сначала были AMD и CommonJS. Если совсем упрощать, AMD подходил для фронтенда, а CommonJS — для бэкенда. Довольно быстро появилось UMD или Universal Module Definition, эта техника должна была стать мостом между AMD и CommonJS. Теперь мы имеем ES-модули — это новая попытка полностью стандартизировать модульность в JS. Оговорюсь, что у каждого из подходов есть свои преимущества и недостатки, обсудить которые в формате выпуска новостей не получится. Если вам хочется детальнее разобраться в разных системах модульности и понять, как пришли к ES-модулям, я приложу ссылку на старенькую, но отражающую общую картину статью со сравнением от Игора Ирианто (Igor Irianto). Итак, ESM уже поддерживаются современными браузерами и Node.js с 12-й версии. Вернёмся к прекращению поддержки Node.js 10. На фоне этого Синдре Сорхус (Sindre Sorhus) — разработчик и мейнтейнер более чем тысячи пакетов — написал в своём блоге статью-призыв мигрировать библиотеки на ES-модули. Он сам планирует за 2021 год мигрировать свои пакеты на ESM полностью и без поддержки CommonJS. Он мотивирует это тем, что хочет ускорить полный переход на ESM всей JS-экосистемы и призывает к этому других. Призыв хороший, но немного радикальный, потому что Node.js пока не будет прекращать поддержку CommonJS, и в целом какое-то время ещё будут существовать проекты на 10-й версии. Это не беда, можно перевести библиотеку на ESM с CommonJS-фоллбэком, об этом в статье Синдре тоже есть. В целом, переход на ESM — явление, безусловно, позитивное, но такие переходы занимают несколько лет, посмотрим как получится в этот раз.

Продолжаем тему ES-модулей. Гиль Тайар (Gil Tayar) в своём блоге опубликовал серию статей об использовании ES-модулей в Node.js. В первой статье он знакомит читателей с основами и рассказывает о ESM и небольших подводных камнях: например, в Jest поддержка ESM пока экспериментальная. Также автор показывает простейший шаблон ES-модуля с подробным разбором элементов. Вторая часть посвящена фиче Node.js exports и созданию dual-mode модулей, как раз с тем самым CommonJS-фоллбэком, про который я говорил ранее. Третья часть посвящена TypeScript и тулингу.

Джош Комо (Josh Comeau) в своём блоге написал статью о CSS transition. Вы все наверняка о нём знаете: это свойство, которое интерполирует переход из одного состояния в другое и таким образом делает его плавным. Статья подробная, помимо основ охватывает и более глубокие вопросы, например, задание кастомной функции для анимации с течением времени и производительность таких анимаций. Материал подойдёт для разработчиков разного уровня, для каждого найдётся что-то интересное.

Продолжим тему CSS. Следующий материал — статья Ури Шакеда (Uri Shaked) и Михаль Пораг (Michal Porag) на css-tricks о том, как вычисляются высота и ширина элементов. Для создания полной картины авторы начинают с добавления простого паддинга, потом рассматриваются родители и потомки, относительные единицы и разные значения display. Дальше рассматриваются значения в процентах и min(), max() и clamp(). Получилось подробно и наглядно, с примерами кода и иллюстрациями.

В блоге Кристиана Хaйльмана (Christian Heilmann) появилась новая заметка: как передавать данные между JS и CSS при помощи CSS-переменных. Суперпросто: получить значение CSS-переменной и установить другое на JS. Для чего это может понадобиться? Как пример Кристиан приводит передачу координат курсора, к которым CSS сам по себе доступа не имеет. Прикольный трюк, которому можно найти немало применений.

В заключение рубрики материал специально для тех, кто давно хотел разобраться с базами данных, но сдался из-за сложности материала. Чет Коркос (Chet Corcos) постарался объяснить, что такое база данных и как она работает на примере бумажной картотеки. Описываются основные понятия, read/write трейдоффы, запросы и другие концепции. Кроме того, каждая аналогия переводится и на технический язык для лучшего понимания.

Новости релизов

LTS-версии Node.js получили обновления. Во всех апнули npm до 6.14.11. Кроме того, в 10.23.3 был исправлен краш в модуле crypto и добавлен новый тест его пайплайна, в 12.20.2 исправили утечку памяти, связанную с методом exit и AsyncLocalStorage, а в 14.15.5 в модуле zlib перестали использовать один из устаревших методов.

Небезызвестный imgproxy обновился до версии 2.16.0. Добавили поддержку AVIF и Azure Blob Storage, а также несколько баг-фиксов и доработок.

Не успела подъехать одна заплатка, как уже нашивают другую. Речь о Mozilla Firefox 85.0.2. Устранили зависание Firefox на MacOS при попытке открыть новое окно из док-панели.

Раз уж мы заговорили о браузерах, доступно Safari Technology Preview 120. Ничего примечательного, но много фиксов багов и доработок.

WebdriverIO — инструмент для автоматизации тестирования — обновился до 7-й версии. Теперь Node.js 10 не поддерживается, проект был переписан на TypeScript, и появилась возможность работать с Lighthouse при использовании DevTools-протокола.

Вышел Laravel 8.26.0. Был добавлен новый метод missing(). Он позволяет удобно кастомизировать поведение приложения при попытке доступа к отсутствующей записи. Также напомню, что с предыдущей версии 8.25.0 фреймворк поддерживает параллельный прогон тестов.

Другие новости

Проекты постепенно продолжают откалываться от Mozilla, на этот раз Rust. Был основан Rust Foundation, который будет управлять развитием экосистемы и самого языка. Mozilla совсем в стороне не останется и будет его платиновым спонсором. Помимо Mozilla учредителями и спонсорами фонда стали Huawei, Microsoft, AWS и Google. Кроме представителей компании фондом будут управлять 5 лидеров проекта из разработки и других направлений. Звучит как позитивное изменение.

Комментарии

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