Несколько дней назад вышла новая версия Snowpack. Фред Шотт — автор проекта — рассказал про все новинки релиза.

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

В Snowpack v3.0 были добавлены Streaming Imports. Благодаря им Snowpack может загружать и кэшировать npm-модули без явного использования npm install. С этой версии Snowpack может создавать оптимизированные production-билды с помощью esbuild (очень быстрый сборщик, написанный на Go). Реализован новый API, который уже используется в SvelteKit. Сгенерированные с помощью Snowpack файлы теперь можно без проблем импортировать в Node.js.

В общем, не релиз, а бомба. Рекомендую посмотреть в сторону Snowpack, если используете обычные сборщики и ждёте по несколько минут пересборки проекта при сохранении файлов.

#release #bundle #tool

https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0

Дэниэл Дестефанис из Discord рассказал о том, как разработанные ими плагины для Figma упрощают жизнь разработчикам и дизайнерам — "Building open-source design tools to improve Discord’s design workflow".

Ребята из Discord сделали несколько плагинов для Figma, которые им помогают в работе. Плагин "Auto Theme" используется для автоматической генерации светлой/тёмной темы экранов приложения. Плагин "Design Lint" помогает быстро находить проблемные места в макете, когда в нём используются параметры, которых нет в дизайн-системе (цвет, радиус скругления углов и т.п.) Плагин "Table of Contents" генерирует список ссылок на основные части макета для помощи в навигации по документу. Плагин "Inspect" используется для упрощения разработки плагинов. Все плагины доступны на GitHub.

Интересная статья. Очень рекомендую заглянуть, если работаете с Figma.

#ux #tool

https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143

На прошедшем Chrome Dev Summit Сэм Сороугуд рассказал про оптимальный подход кэширования ресурсов — "Love your cache".

В качестве дефолтного поведения Сэм предлагает использовать кэширование с ревалидацией: Cache-Control: max-age=0,must-revalidate,public. Этот подход используется в современных CDN, например, Netlify. Но стоит учитывать, что при ревалидации браузер отправляет дополнительный запрос на сервер.

Для ресурсов, которые обновляются редко, предлагается использовать хэши в именах файлов и длинное время жизни кэша: Cache-Control: max-age=31536000,immutable. Использования одной директивы max-age в Firefox и Safari не гарантирует, что будет использоваться кэш. Для того чтобы все браузеры всегда использовали кэш, нужно добавлять директиву immutable.

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

#performance #cache

https://www.youtube.com/watch?v=tprJYFkv4LU
https://web.dev/love-your-cache/ (расшифровка основного материала доклада)

Наверное, все по несколько раз в день сталкиваются с cookie-баннерами. Сегодня в посте Ната Фридмана (CEO GitHub) прочитал о том, что в некоторых случаях их можно не показывать — "No cookie for you".

Европейский Союз требует, чтобы владельцы сайтов отображали информацию о таких куках, которые необязательны для работы сайта (куки систем аналитики, рекламных сетей, настройки и т.п.) Но на сайте можно не показывать баннер, если используются только такие куки, без которых сайт будет работать некорректно (куки с идентификатором сессии, корзины и т.п.) В конце 2020 года GitHub полностью отказался от использования необязательных кук, и, соответственно, удалил с сайта cookie-баннер.

#web

https://github.blog/2020-12-17-no-cookie-for-you/

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Выбор генератора статических сайтов для 2021 года
— Эмуляцая реалистичных сетевых условий
— Предотвращение повторной отправки форм на уровне спецификации HTML
— Anti-flicker snippets и их влияние на производительность
— Влияние количества прогонов тестов на разброс метрик производительности
— Использование API TypeScript для рефакторинга
— Код-сплиттинг React-приложений по типу устройства (десктоп/мобилки)
— Улучшение качества предупреждений о безопасности
— Почему сейчас никто не использует input type="image"
— Создание игрушечного языка с компиляцией в WebAssembly

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Сегодня вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 88".

В Chrome 88 появилась поддержка Manifest V3 — новой платформы для создания расширений. Расширения, построенные на базе новой платформы, более прозрачны для пользователей, потребляют меньше системных ресурсов и проще для аудита (процесс ревью будет проходить быстрее). Предыдущая версия платформы расширений в будущем будет задеприкейчена.

С этой версии будет работать жёсткий троттлинг цепочек таймеров. Цепочка таймеров — это таймеры, создаваемые с помощью setInterval или с помощью setTimeout внутри коллбека другого setTimeout. Chrome будет троттлить на одну минуту цепочки более чем из 5 таймеров на неактивных страницах, которые не воспроизводят звук. Вместо цепочек таймеров разработчики Chrome предлагают использовать альтернативные API. Подробности можно почитать в статье Джека Арчибальда.

В CSS была добавлена поддержка явного указания соотношения сторон у любого элементе с помощью свойства aspect-ratio.

В HTML ссылки с атрибутом target="_blank" будут вести себя по умолчанию также как с установленным rel="no-opener".

Метод addEventListener теперь поддерживает удаление обработчиков с помощью AbortController.

Много изменений в инструментах разработчика. Они теперь открываются на 37% быстрее предыдущей версии. Появилась возможность эмуляции квот доступного места. На вкладке Performance можно включить отображение событий Web Vitals. Было улучшено отображение ошибок, связанных с CORS. Теперь можно эмулировать отсутствие поддержки WebP и AVIF.

#chrome #release

https://developers.google.com/web/updates/2021/01/nic88
https://developers.google.com/web/updates/2020/11/devtools

Недавно была опубликована ежегодная подборка самых популярных JavaScript-проектов — "Rising Stars 2020". В отличие от State of JS этот топ формируется на основе прироста количества звёзд за год.

Самые популярные проекты 2020 года:
1) Deno — серверный JavaScript- и TypeScript-рантайм (+30.2k звёзд);
2) Vue.js — фронтенд-фреймворк (+22.5k звёзд);
3) React — фронтенд-фреймворк (19.8k звёзд);
4) Playwright — node.js-библиотека для автоматизации браузеров (+19.7k звёзд);
5) VS Code — редактор кода (+19.1k звёзд).

В отчёте также можно найти самые популярные проекты, разделённые по категориям: фронтенд/Node.js фреймворки, экосистема React/Vue/Angular, инструменты сборки и т.п.

Рекомендую заглянуть в отчёт, возможно, что найдёте для себя что-нибудь полезное.

#js #report

https://risingstars.js.org/2020
https://risingstars.js.org/2020/ru (на русском языке)

Джон Снейерс из Cloudinary написал статью о проблемах адаптации новых форматов изображений, и как эти проблемы могут быть решены с помощью JPEG XL — "Legacy and Transition: Creating a New Universal Image Codec".

JPEG XL — это открытый формат изображений, разрабатываемый Joint Photographic Experts Group, Google и Cloudinary. JPEG XL предоставляет прогрессивную загрузку, лучшую скорость кодирования/декодирования и лучшее качество сжатия при сравнимом объёме файла по сравнению с WebP.

Любое JPEG-изображение — это валидный JPEG XL. Трансляция из одного формата в другой требует минимальных вычислительных ресурсов, тем самым JPEG XL можно транслировать в JPEG на лету и отдавать тем браузерам, которые не поддерживают JPEG XL. То есть сайтам не нужно хранить одно и то же изображение в разных форматах для разных клиентов.

Комитет JPEG планирует отправить последнюю версию черновика стандарта в ISO и IEC в этом месяце. Если у проверяющих организаций не будет вопросов, то черновик будет опубликован как международный стандарт в июле.

#graphics

https://cloudinary.com/blog/legacy_and_transition_creating_a_new_universal_image_codec

Пару дней назад был опубликован черновик спецификации CSS Cascading and Inheritance Level 5. Главное изменение спеки — добавление директивы @layer для гибкого управления каскадом. София Валитова разобралась с новой директивой и написала про неё статью в своём блоге — "Пара слов о layer".

С помощью CSS-директивы @layer создаётся именованная группа стилей, которая подчиняется особым правилам каскадности. Обычно, когда для одного и того же элемента находится несколько разных правил, побеждает то правило, которое было определено ниже (без учёта специфичности), или правило с большей специфичностью. То есть каскад правил, который будет применяться к элементам, формируется неявно, разработчик может влиять на него косвенно, изменив порядок правил или повысив специфичность. Директива @layer предоставляет явный механизм для управления этим приоритетом. Например, в примере ниже цвет текста кнопки будет красным, а не зелёным, хотя правило с зелёным цветом было определено по коду ниже:

@layer components, common;

@layer common {
  button {
    color: red;
  }
}

@layer components {
  button {
    color: green;
  }
}

Директива layer может пригодиться для структурирования стилей, при рефакторинге и темизации. Но на данный момент её поддержки нет ни в одном браузере.

#spec #css

https://ariarzer.dev/css-cascade-layer.html

P.S. София ведёт телеграм-канал с разбором спек CSS. Если хотите углубить свои знания в этой теме, очень рекомендую подписаться @css_mind.

Марк Эриксон — майнтейнер Redux — написал статью с подробным объяснением, почему Context в React не может заменить стейт-менеджеры — "Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)".

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

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

#react #statemanagement

https://blog.isquaredsoftware.com/2021/01/context-redux-differences/

Матиас Шэфер написал статью про опыт поддержки больших JavaScript-приложений — "Maintaining large JavaScript applications".

Матиас участвует в разработке нескольких больших приложений, которые были написаны более пяти лет назад. Клиенты его дизайн-студии обычно не хотят инвестировать в масштабный рефакторинг, поэтому ему приходится много работать с легаси. Благодаря этому он сформулировал для себя несколько простых правил, которые помогают содержать код во вменяемом состоянии.

Он предпочитает использовать чистые функции везде, где возможно. Избегает смешивания логики и данных в объектах. Если использует классы, то следует принципу единственной ответственности. Не смешивает много функций в одном файле, стремится, чтобы каждый файл содержал только одну экспортируемую сущность. Для создания объектов место литералов предпочитает использовать фабрики.

Интересная статья, рекомендую заглянуть.

#js

https://9elements.com/blog/maintaining-large-javanoscript-projects/

Матиас Шэфер написал продолжение статьи о работе с унаследованным кодом. В статье "Maintaining JavaScript applications in the long term" он рассказывает об опыте поддержки фронтенд-проекта на протяжении шести лет.

В 2014 году ребята сделали сайт для организации экономического сотрудничества и развития. Для разработки использовали популярные на тот момент CoffeeScript, D3, jQuery и Backbone. Так как сайт надо было постоянно дорабатывать, и клиент не был готов к глобальному рефакторингу, потихоньку проводилась модернизация кода. CoffeeScript был заменён на современный JavaScript. Для автоматической конвертации кода использовали утилиту decaffeinate, всё прошло без проблем. Для улучшения опыта разработки стали использовать TypeScript и описания типов в JSDoc. За всю жизнь проекта больше всего проблем было не с библиотеками, а с созданными абстракциями.

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

#js

https://9elements.com/blog/maintaining-javanoscript-applications-in-the-long-term/

Сегодня вышла новая версия Firefox. Крис Миллс рассказал про основные новинки релиза — "January brings us Firefox 85".

В CSS реализована поддержка :focus-visible. Этот псевдоэлемент позволяет стилизовать кольцо фокуса для тех случаев, когда оно должно быть отображено браузером (например, кольцо фокуса по умолчанию не отображается при клике на кнопку, но появляется при навигации по странице с клавиатуры).

Добавлена поддержка хинта производительности <link rel="preload" ...>. Он позволяет заблаговременно подгрузить ресурсы, которые нужны для отображения текущей страницы.

Полностью удалена поддержка Flash. К этому моменту разработчики шли пять лет.

В ночных сборках Firefox добавлена поддержка top-level await и метода .at() для получения элементов массива/строк с помощью относительных индексов.

#release #firefox

https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/

В Firefox 85 для всех пользователей включён изолированный кэш для борьбы с супер-куками — "Firefox 85 Cracks Down on Supercookies".

Супер-куки — это общее название для методов идентификации пользователей, которые сложно предотвратить. Их используют рекламные сети для определения сайтов, которые посещал пользователь. Например, такой супер-кукой может быть обычное изображение. В Firefox до версии 85 работал междоменный кэш для загружаемых изображений. Если изображение было ранее загружено другим сайтом, то оно извлекалось из кэша, Трекеры могли засечь время получения изображения и на основе этой информации определить, посещал ли пользователь определённый сайт или нет.

В Firefox 85 была включена изоляции для разных видов кэшей: HTTP-кэша, кэша изображений, кэша для favicon, HSTS, OCSP, CSS и т.п. Изоляция может незначительно влиять на производительность — время загрузки сайта для самого наихудшего случая увеличилось на 1.32%.

Firefox стал последним популярным браузером, который реализовал изолированный кэш для ресурсов.

#firefox #cache #performance

https://blog.mozilla.org/security/2021/01/26/supercookie-protections/

Аксель Раушмайер написал статью про отличия между undefined и null — "undefined vs. null revisited".

Спецификация описывает эти значения следующим образом: undefined используется как значение по умолчанию в неинициализированных переменных; null используется как значение, которое явно устанавливается разработчиком как признак отсутствия любого объектного значения.

Для выбора между undefined и null Аксель использует правило: undefined — это метазначение, которое существует на уровень выше кода программы, и оно означает, что что-то не существует или отсутствует; null — существует на уровне кода программы, и оно означает, что что-то "отключено".

Мне не очень нравится метафора с "отключением" с помощью null, но нравится идея undefined как метазначения. Как бы то ни было, статья полезная, рекомендую почитать.

#js

https://2ality.com/2021/01/undefined-null-revisited.html

Defront сегодня празднует второй день рождения. В январе 2019 года мне захотелось поделиться прочитанной статьёй со своими коллегами во внутреннем чате Яндекс.Маркета. Написал небольшой tldr и подумал, что такой формат будет полезен большему числу людей. Потом пошло-поехало, и вот вас уже больше 5000.

Благодарю за помощь в развитии канала:
Сергея Рубанова (@webnya — крутой канал про web-стандарты и новинки web'а от участника TC39)
Олега Ковалёва (@oleg_log — сильный канал про бэкенд и программирование в целом)

Также хочу передать привет всем дружественным каналам и сообществам (если кого-то забыл, пишите в лс):
@ufostation @javanoscript_ru
@typesafesound @amorgunov
@frontend_u_news
@forwebdev @winterview
@dereference_pointer_there
@evodevclub @Loskirs
@htmlshit @prostorazrabotka
@we_use_js @css_ru

Спасибо всем за помощь и поддержку!

P.S. Если считаете нужным, можете сделать подарок каналу и рассказать про Defront своим друзьям, коллегам и подписчикам.

https://twitter.com/myshov/status/1355105595997757442

Джек Арчибальд написал статью про опасность использования функций в качестве коллбеков — "Don't use functions as callbacks unless they're designed for it".

Скорее всего вы когда-нибудь сталкивались с подобным кодом: [1, 2, 3].map(doSomething). Если doSomething поставляется внешней библиотекой и принимает один аргумент, то всё будет работать нормально. Но код может сломаться, когда doSomething начнёт принимать больше аргументов. Джек пишет о том, что если функция не создавалась с явным учётом того, что она будет использоваться в качестве коллбека, то вместо неё безопаснее использовать функцию-враппер [1, 2, 3].map(x => doSomething(x)).

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

Полезная статья. Рекомендую заглянуть.

#js

https://jakearchibald.com/2021/function-callback-risks/

В блоге GitHub была опубликована статья про оптимизацию анимаций и изображений — "Making GitHub’s new homepage fast and performant".

При разработке новой домашней страницы GitHub ребята столкнулись с проблемой — в коде не было явного перечисления анимируемых свойств transition: * 0.6s ease;, что приводило к повышенному потреблению CPU. Для решения этой проблемы они стали анимировать только opacity и transform: transition: opacity 0.6s ease, transform 0.6s ease;.

Внизу страницы находится большое изображение с прозрачностью. Самым оптимальным форматом для хранения этого изображения лучше всего подошёл WebP. В качестве фоллбека воспользовались SVG с маской. Благодаря такому подходу удалось сэкономить несколько сотен килобайт.

Интересная статья. Рекомендую заглянуть.

#performance

https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/

Дейв Седдиа написал статью про современную экосистему React — "State of the React Ecosystem in 2021".

Этот обзор был вдохновлён вопросом на reddit, где участник задал вопрос про актуальность подходов, которые были популярны в 2016 году. За пять лет в мире React произошло много изменений. Появились хуки, стабилизировался Context API, появилась экспериментальная поддержка Suspense и Server Components. Redux остаётся популярным решением для работы с состоянием, но очень сильно сдаёт свои позиции. Для загрузки данных набирают популярность библиотеки react-query и swr. Для описания сложной логики используют библиотеку XState.

Рекомендую почитать статью, если хотите познакомиться с современными инструментами и библиотеками экосистемы React.

#react

https://daveceddia.com/react-ecosystem-overview/

Мод Нальпас написала статью о том, в каких случаях следует использовать HTTPS для локальной разработки — "When to use HTTPS for local development".

Для разработки лучше всего использовать http://localhost, так как браузеры в этом случае разрешают использовать многие API, которые доступны только с HTTPS (сервис воркеры, Payments API, Credentials API и т.п.) Но если нужно протестировать Secure Cookies, HTTP/2, исправить проблему с mixed content или если в hosts-файле стоит резолвинг 127.0.0.1 в уникальное имя, то нужно использовать HTTPS.

Если используется уникальное имя, то оно не должно совпадать с доменом верхнего уровня, иначе могут быть проблемы с резолвингом. В качестве альтернативы Мод предлагает использовать специальные домены верхнего уровня .test и .localhost. Все имена с доменом верхнего уровня .localhost будут работать так же, как и http://localhost, но только в Chrome и Edge.

#http

https://web.dev/when-to-use-local-https/

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Igalia о процессе имплементации focus-visible в WebKit
— Как написать ясный текст
— Как задеприкейтить сигнатуру функции с помощью TypeScript
— Является ли разработка ПО инженерной дисциплиной
— Причины плохой производительности сайтов, использующих Ember
— Автоматическая генерация атомного CSS
— Проблемы рендеринга изображений во flex-контейнерах в WebKit
— Альтернативный подход к разработке на JavaScript
— Опыт использования Node.js с Apple M1
— Minimum viable experience и прогрессивное улучшение

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov