Вадим Демедес опубликовал небольшую статью про "Ink".

Ink - это разработанная Вадимом библиотека для написания интерактивных консольных интерфейсов с использованием React-компонентов. Ink поддерживает flexbox-лайаут с помощью yoga-layout. Вокруг библиотеки есть небольшая экосистема: можно найти готовые компоненты text-input, spinner, tab, select, gradient и другие.

Ребята из npm и jest выразили свою заинтересованность в проекте, и, возможно, они будут использовать его в будущем.

#library #react #cli

https://vadimdemedes.com/posts/building-rich-command-line-interfaces-with-ink-and-react

Валентин Федяков опубликовал на хабре статью "Знакомство с lit-element и веб-компонентами на его основе".

Lit-element – это обёртка над web-компонентами, с помощью которой можно создавать react-подобные компоненты (именно такое первое впечатление они на меня произвели). Для рендеринга элементов lit-element использует библиоетку lit-html. Для работы со свойствами элементов используются декораторы.

В статье разбирается создание своего элемента, описывается API для работы со свойствами, методы жизненного цикла и возможный способ динамической подгрузки web-компонентов на страницу. В общем, если вам не хватает декларативности при описании web-компонентов, то вам скорее всего будет интересно взглянуть на lit-element.

#webcomponents #litelement #library

https://habr.com/ru/post/445438/

Эдди Османи опубликовал в марте статью про работу с большими списками в React — "Rendering large lists with react-window".

Рендеринг десятков и сотен тысяч элементов в списке приводит к лагам в интерфейсе. Для решения этой проблемы используются виртуализированные списки, в которых рендерится не весь контент сразу, а только та его часть, которая видна в данный момент плюс некоторое смещение выше и ниже. Самая известная библиотека для создания таких списков react-virtualized Брайана Воуна (Brian Vaughn). Но существует более компактный аналог от того же автора — react-window. Про него и рассказывает в статье Эдди.

React-window — очень компактная и быстрая библиотека. В статье есть примеры того, как сделать с помощью неё виртуальный список и таблицу на гридах. У react-window есть несколько ограничений в отличие от react-virtualized, но для большинства случаев она подходит хорошо.

#performance #react #library

https://addyosmani.com/blog/react-window/

Вчера на calendar.pefrplanet.com была опубликована статья Ника Джансма — разработчика Akamai — про оптимизацию библиотеки для сбора RUM (Real User Metrics) — "Boomerang Performance Update".

Boomerang — это библиотека с открытым исходным кодом. Она используется под капотом mPulse (сервис для сбора RUM-метрик от Akamai). В 2017 году был проведён аудит Boomerang, который выявил узкие места. Загрузчик основного скрипта использовал динамически создаваемый iframe. На старых девайсах создание iframe несло дополнительные издержки, увеличивая время инициализации на 20-40мс. После перехода на link preload в браузерах, которые его поддерживают, время инициализации уменьшилось до 1мс. Для сбора таймингов ресурсов сайта, они используют префиксное дерево (Trie), которое также было неоптимизировано. После исправления функция оптимизации дерева стала работать в четыре раза быстрее. Чтобы уменьшить размер основного скрипта, алгоритм хеширования MD5 был заменён на FNV-1. Скрипт уменьшился на 8 килобайт.

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

#performance #algorithm #library

https://calendar.perfplanet.com/2019/boomerang-performance-update/

Рич Харрис — создатель svelte и rollup — пару дней назад рассказал про подход для создания js-free графиков, который был проверен в бою на сайте New York Times, — "A new technique for making responsive, JavaScript-free charts".

Идея состоит в том, чтобы генерировать svg-разметку диаграммы на сервере. Весь текст и оси создаются с помощью обычного css и html, для того чтобы избавиться от искажений при изменении размера контейнера. То есть окончательная диаграмма представляет из себя "бутерброд" из html и svg. Для упрощения создания подобных графиков Рич создал библиотеку Pancake, которая работает поверх Svelte. Благодаря ей создаваемые диаграммы можно прогрессивно улучшать, добавляя интерактивность после инициализации js.

Pancake не является серебряной пулей — при большом количестве отображаемых данных есть проблемы с производительностью. Рич пишет, что планирует добавить поддержку рендеринга с помощью <canvas>.

#chart #library #svg #svelte

https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp

Андрей Ситник в блоге Evil Martians опубликовал статью про грядующие изменения в PostCSS — "PostCSS 8.0 is coming".

В восьмой версии не ожидается ломающих изменений для большинства пользователей — все плагины, написанные для текущей седьмой версии, будут работать. Планируется работа над уменьшением размера node_modules — все плагины будут использовать общий пакет PostCSS. Будет добавлено новое API для написания плагинов, которое ускорит транспиляцию CSS-файлов; старое API остаётся доступно всем разработчикам плагинов без каких-либо нюансов. В PostCSS 8.0 будет удалена поддержка Node,JS 6 и 8. Также будет удалён шаг сборки с помощью Babel, исходники будут публиковаться в npm без транспиляции. Планируется доработка сайта документации.

https://evilmartians.com/chronicles/postcss-8-is-coming-here-is-what-it-brings

#announcement #library #css

Сегодня вышел новый релиз Apollo Client одного из самых популярных клиентов для graphql — "Announcing the Release of Apollo Client 3.0".

Все популярные клиенты для graphql решают проблему кэширования. Они создают подмножество графа данных бэкенда на клиенте, позволяя разным graphql-запросам работать с единым набором закэшированных данных.

В третьей версии Apollo были добавлены реактивные переменные, которые при обновлении инициируют повторное чтение во всех местах их использования. Благодаря им можно упростить работу с локальным стейтом. Была добавлена поддержка Cache field policies, с помощью которых можно управлять процессом чтения и записи в кэш. Были добавлены хэлперы для упрощения работы с пагинацией.

#release #graphql #library

https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/

Eleventy (11ty) — это статический генератор сайтов, который сейчас набирает популярность. Его используют Google, Khan Academy, Netlify. Сайт Defront тоже создаётся с помощью этого движка.

Мальте Убл — инженер из Google — недавно опубликовал шаблон для 11ty, который был оптимизирован для создания высокопроизводительных сайтов. Вот его возможности:
— загружает изображения с внешних источников для их быстрой отдачи клиенту;
— генерирует разные размеры изображений и вставляет их в srcset;
— решает проблему с Cumulative Layout Shift (CLS), извлекая размеры изображений и используя их в атрибутах width и height;
— инлайнит CSS и автоматически удаляет неиспользуемые стили;
— использует иммутабельных URL для изображений и скриптов;
— предзагружает шрифты;
— и делает ещё много всего полезного.

В общем, если вам вдруг понадобится сделать сайт или блог, очень рекомендую присмотреться к 11ty. Работаю с ним уже больше года и вполне доволен его возможностями.

#library #performance

https://www.industrialempathy.com/posts/eleventy-high-performance-blog/

Команда разработчиков Moment.js официально объявила о прекращении развития библиотеки.

Moment.js — самая популярная библиотека для работы с датами и временем на сегодняшний день. Она была создана в 2011 году с прицелом на потребности разработчиков того времени. За весь период существования библиотеки её дизайн не менялся, но сообщество хотело изменений, особенно иммутабельности и переработки архитектуры таким образом, чтобы библиотека стала дружить с тришейкингом. Внесение этих изменений вызвало бы вопросы у текущих пользователей библиотеки, так как получилась бы совершенно другая библиотека. Разработчики Moment.js не захотели идти по пути Angular и разработали альтернативную библиотеку — Luxon.

С сентября 2020 года в Moment.js не будут добавляться новые фичи, не будут больше обсуждаться вопросы тришейкинга, не будет никаких мажорных изменений (это означает, что никогда не будет 3-ей версии), возможно, не будут исправляться какие-либо баги и поведенческие странности, если они будут связаны с архитектурными проблемами. Но будут исправляться все проблемы безопасности, будет обновляться база часовых поясов IANA.

Разработчики рекомендуют не использовать Moment.js для новых проектов без поддержки старых браузеров, вместо неё рекомендуются Luxon, Date.js, date-fns и js-Jode. Также сейчас TC39 работает над Temporal (современной заменой объекта Date), в которой реализуется основная масса фич библиотек для работы с временем.

#announcement #date #library

https://momentjs.com/docs/#/-project-status/

В блоге skypack была опубликована отличная статья-обзор современных библиотек для работы с датами — "The best JavaScript date libraries in 2021".

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

Для работы с часовыми поясами лучше всего подходит Luxon. Luxon под капотом использует браузерное API Intl, оборачивая всё в иммутабельное и дружественное API.

Если вам нужен самый минимум от работы с датами, а с нативным Date работать не хочется, то можно воспользоваться Day.js (размер 4kb). Day.js предоставляет API очень похожее на Moment.js. Moment.js в свою очередь не рекомендуются использовать, так как он был задеприкейчен в 2020 году.

#library #date

https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/

Джаред Уайт рассказал, почему он больше не хочет использовать Tailwind CSS — "Why Tailwind Isn't for Me".

Tailwind CSS — это набирающий популярность CSS-фреймворк, использующий методологию атомного CSS, в которой для каждой комбинации свойство/значение используется уникальный класс. Джаред пишет, что проработал с Tailwind год, но не смог свыкнуться с его недостатками:

— HTML-код с Tailwind выглядит неэстетично
— Для упрощения работы с фреймворком используется директива @apply, которая не является стандартом и в перспективе может принести проблемы, если проект будет переезжать на другой CSS-фреймворк
— Tailwind использует дизайн-токены, которые определяется с помощью JavaScript, а не с помощью кастомных свойств
— Tailwind плохо подходит для работы с web-компонентами
— Использование Tailwind поощряет использование большого количества div'ов и span'ов

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

#css #library #musings

https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

Франсуа Хендрикс рассказал о том, как сделать библиотеку, у которой не было бы проблем с три-шейкингом — "How To Make Tree Shakeable Libraries".

Недостаточно поправить конфиг сборки приложения, чтобы бандлер смог выкинуть неиспользуемый код библиотеки. Сама библиотека не должна мешать этому процессу. Eё код должен быть написан с использованием ESM и разбит на большое число небольших модулей, которые экспортируют только один кусок логики. При сборке библиотеки нужно настроить её бандлинг с сохранением структуры. Это нужно делать для того, чтобы бандлеры могли применять оптимизации, опираясь на информацию из поля sideEffects package.json.

Также в статье есть рекомендация не использовать транспиляцию перед публикацией библиотеки, так как наиболее оптимальную цель транспиляции знает только пользователь библиотеки. Если от транспиляции отказаться нельзя, то нужно проконтролировать, чтобы сохранился формат ESM.

Очень полезная и большая статья. Рекомендую почитать.

#performance #bundle #library

https://blog.theodo.com/2021/04/library-tree-shaking/

Partytown — запуск сторонних скриптов в веб-воркере

Автор фреймворка Ioinic Адам Бредли представил новую библиотеку для запуска сторонних скриптов в веб-воркере — "Introducing Partytown: Run Third-Party Scripts From a Web Worker".

Разработчики JS-фреймворков вкладывают много сил, чтобы пользовательские приложения были быстрыми и отзывчивыми. Эти усилия могут нивелировать сторонние скрипты. Например, добавление на сайт Google аналитики срезает 20 баллов производительности в Lighthouse, так как увеличивается время инициализации страницы.

Partytown позволяет вынести сторонние скрипты в веб-воркер, разгружая основной поток выполнения. У скриптов в воркере появляется синхронный доступ к DOM, который реализуется с помощью Proxy и блокирующих XHR-запросов.

На данный момент доступна альфа-версия библиотеки. Простестирован сандбоксинг скриптов Google Analytics, Google Tag Manager, Amplitude и нескольких других сервисов.

Очень полезная библиотека, попробую её у себя в проекте.

#js #library #performance

https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp