Defront — про фронтенд-разработку и не только

Рич Харрис на Svelte Summit 2020 рассказал про новые фичи фреймворка, над которыми работает основная команда разработчиков Svelte — "Futuristic Web Development".

Идёт работа над интеграцией возможностей Sapper (фреймворк для построения приложений на базе Svelte с роутингом, код-сплиттингом и т.п.) в основную кодовую базу Svelte. В перспективе разработка Sapper будет остановлена.

Добавлена возможность создания гибридных приложений. В таких приложениях некоторые страницы могут быть пререндерены заранее в статический HTML.

Svelte будет полагаться на поддержку ESM в современных браузерах, так как для менеджмента зависимостей будет использоваться Snowpack. Благодаря этому не нужно постоянно собирать приложение при изменении кода. Rollup будет использоваться только для сборки финального оптимизированного бандла приложения.

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

#svelte #jsframeworks #talk #experimental

https://www.youtube.com/watch?v=qSfdtmcZ4d0

Артём Караваев на хабре написал статью о том, как складывать числа с плавающей запятой без потери точности.

Зачем это нужно. Представьте, что у вас есть большой массив чисел с плавающей запятой, и вам надо найти их сумму. Чем больше будет массив тем больше будет ошибка в вычислении из-за накопления погрешности.

Математически можно доказать, что ошибку округления сложения чисел с плавающей запятой всегда можно точно представить другим числом с плавающей запятой. То есть чтобы сложить два числа с плавающей запятой без потери точности, нужно вычислить погрешность и использовать её в других вычислениях. Найти эти числа можно так (в статье есть более точные алгоритмы поиска для разных входных значений):

s = a+b; // сумма
z = s-a;
t = b-z; // погрешность

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

#math #algorithm

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

Эдди Османи написал статью про использование паттерна PRPL — "Faster Web App Delivery with PRPL".

PRPL — это паттерн для структурирования и улучшения производительности web-приложений (SPA и PWA).

PRPL описывает четыре этапа жизненного цикла приложения от этапа доставки кода в браузер до его отрисовки:
— Push — при первом открытии приложения, самые необходимые ресурсы доставляются как можно быстрее с помощью server push или preload;
— Render — затем отрисовывается экран приложения с использованием минимального количества необходимых ему ресурсов;
— Pre-cache — после того как приложение было отрисовано, оно может подгрузить ресурсы тех страниц приложения, которые с большой вероятностью будут открыты пользователем;
— Lazy-load — при работе с приложением его куски доставляются в браузер по мере необходимости, это обычно реализуется с помощью code splitting и динамических импортов.

Хорошая статья. Обязательно загляните, если занимаетесь разработкой web-приложений.

#performance #mobile #js

https://addyosmani.com/blog/the-prpl-pattern/

Не знаю как у вас, но меня постоянно вводили в ступор хинты производительности <link rel="prefetch"> и <link rel="preload">. Когда пытался вспомнить их назначение, в голове возникали примерно такие вопросы: "Prefetch отвечает за оптимизацию загрузки ресурсов для текущей страницы или следующих страниц? А за что тогда отвечает preload?"

Prefetch и preload похожи друг на друга: prefetch отвечает за оптимизацию загрузки ресурсов на страницах, которые будут открыты через некоторое время, preload — за оптимизацию загрузки ресурсов, которые нужны прямо сейчас на текущей странице.

Сегодня придумал мнемоническое правило, помогающее запомнить, что за что отвечает: preLoad помогает оптимизировать загрузку ресурсов на локальной (Local) странице (то есть текущей), preFetch помогает оптимизировать загрузку ресурсов на будущих (Future) страницах.

Preload — local, prefetch — future.

#performance #trick

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

Лукас Ф. Коста — автор библиотеки Chai.js — написал статью про package-lock.json — "Why does package-lock.json exist, and how does it work?".

При повторной установке пакетов с зафиксированными версиями результирующий node_modules может отличаться, так как могут быть обновлены зависимости зависимостей. Чтобы добиться детерминированной установки в npm используется файл package-lock.json, в котором явно описываются все версии всех зависимостей.

При запуске команды npm i установщик получает список зависимостей проекта из package.json и во время их установки обновляет package-lock.json, записывая туда полное дерево зависимостей с необходимой метаинформацей. Для установки пакетов из package-lock.json нужно использовать другую команду — npm ci. Эта команда устанавливает все зависимости, создавая идентичное дерево зависимостей на момент последнего выполнения npm i. Кроме детерминированности npm ci даёт очень хороший буст в скорости установки пакетов, поэтому чаще всего её используют в CI-системах.

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

#npm

https://lucasfcosta.com/2020/10/17/lockfile-guide.html

Вчера вышел Node.js v15.0.0.

TLDR

В релизе был обновлён движок V8 до версии 8.6, npm был обновлён до седьмой версии, обновлена версия N-API, была добавлена поддержка AbortController и QUIC, необработанные ошибки промисов теперь приводят к прекращению работы Node.js.

Подробнее

V8 был обновлён до версии 8.6. С новой версией движка в Node.js появилась поддержка Promise.any(), AggregateError, логических операторов присваивания &&=, ||=, ??=, String.prototype.replaceAll().

Npm был обновлён до версии 7. В нём появилась поддержка воркспейсов, изменён формат package-lock.json, добавлена поддержка yarn.lock, установка peerDependencies по умолчанию. Недавно в канале был подробный пост про новую версию npm, его можно почитать тут.

Была добавлена экспериментальная поддержка нового транспортного протокола QUIC, который лежит в основе HTTP/3. Основные фичи QUIC: по умолчанию безопасен (используется TLS 1.3), исправление проблемы head-of-line blocking, поддержка миграции соединения. Более подробно про QUIC и HTTP/3 можно почитать тут.

В Node.js 15 необработанные ошибки промисов будут выкидывать исключение и приводить к остановке работы Node.js, если не была установлена глобальная обработка unhandledRejection. Такое решение было принято, чтобы показать важность обработки ошибок промисов, без них могут возникать утечки памяти и другие проблемы. Это поведение можно поменять с помощью флага --unhandled-rejections=warn.

Была добавлена экспериментальная поддержка AbortController — Web API, с помощью которого можно отменять работу API на базе промисов.

N-API — API для создания аддонов — было обновлено до седьмой версии. В нём были добавлены дополнительные методы для работы с ArrayBuffers.

Нечётное число в версии Node.js означает, что это экспериментальная версия, она будет поддерживаться до июня 2021 года. Самая последняя стабильная версия Node.js 14 на следующей неделе получит статус LTS.

#nodejs #release

https://medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278

Сегодня зарелизился Firefox 82. В этой версии упор был сделан на скорость работы браузера. Исправлены минорные проблемы с DOM API. Есть немного улучшений в DevTools. По умолчанию включена поддержка Media Session API.

Самое интересное для разработчиков
— В DevTools на вкладке "Network" теперь можно инспектировать server-sent events (SSE); панели "Message" и "Response" были объединены (то есть можно просматривать сообщения web socket'ов и SSE прямо под списком сетевых ответов)
— Диалог выбора цвета стал доступен с клавиатуры на Windows
— Появилась поддержка флага allow-downloads в <iframe sandbox>
— В CSS появилась поддержка псевдоэлемента ::file-selector-button для стилизации кнопки выбора файла
— Псевдоклассы :is() и :where() стали более толерантны к ошибкам — невалидный элемент из списка селекторов больше не делает весь список неавалидным
— Если у тэга <a> есть атрибут download (то есть это ссылка на загрузку файла), он будет перекрывать поведение открытия файла в браузере при установленном HTTP-заголовке Content-Disposition: inline;filename="somefile.jpg"
— Включена поддержка Media Session API. С помощью этого API в системные нотификации можно интегрировать информацию о текущем проигрываемом треке и обрабатыватать события медиа-клавиш на клавиатуре, пультах дистанционного управления и наушниках
— Свойство window.name сбрасывается, если в текущей вкладке загружается другой сайт. Это изменение было сделано для улучшения приватности, но оно может повлиять на фреймворки, которые используют window.name для междоменного обмена сообщениями

Нововведения для пользователей
— Ускорена работа браузера (раскладки на флексах работают на 20% быстрее, сессии восстанавливаются на 17% быстрее, на windows открытие новых окон стало быстрее на 10%).
— В Windows добавлена поддержка аппаратного декодирования видео, оно снижает потребление ресурсов GPU, CPU и положительно сказывается на разряде батареи
— Улучшена работа с режимом Picture-In-Picture

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/82
https://www.mozilla.org/en-US/firefox/82.0/releasenotes/

В 2016 году в набор команд ARM была добавлена операция, специально разработанная для работы с JS-движками, — "Armv8-A architecture: 2016 additions".

В JavaScript все числа представляются в формате чисел с плавающей запятой двойной точности, но при работе с битовыми операциями они преобразуются в 32-битные целые числа (в спецификации для этого используется ToInt32 ). Битовые операции относительно часто используется в JS-коде, поэтому для ускорения таких преобразований в набор команд архитектуры Armv8 была добавлена новая команда FJCVTZS.

Можно сказать, что JS проник не только на сервера, десктоп и мобильные приложения, но и в набор команд процессоров.

#js #internals

https://community.arm.com/developer/ip-products/processors/b/processors-ip-blog/posts/armv8-a-architecture-2016-additions
https://stackoverflow.com/questions/50966676/why-do-arm-chips-have-an-instruction-with-javascript-in-the-name-fjcvtzs

Стэфани Стимак из Microsoft поделилась своими мыслями про производительность сайтов с точки зрения деревенского жителя — "Location, Privilege and Performant Websites".

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

Основная мысль статьи — критически важные сайты должны тестировать свою производительность на слабых устройствах с ограниченным доступом в сеть. В некоторых случаях можно поддерживать отдельную версию сервиса, адаптированную для работы в загруженной мобильной сети. После разрушений урагана Ирма NPR запустил текстовую версию сайта без изображений, JS и CSS специально для того, чтобы люди могли быстро получать информацию о последних новостях.

#performance #musings

https://blog.stephaniestimac.com/posts/10-30-2019-performance/

Ник Джансма из Akamai написал большую статью про метрику CLS — "Cumulative Layout Shift in Practice".

Метрика CLS (Cumulative Layout Shift) показывает, насколько контент страницы стабилен. Большой показатель CLS обычно говорит о том, что у страницы плохой пользовательский опыт. Например, когда сдвигается текст из-за загрузки изображения или рекламных виджетов.

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

— CLS на мобильных устройствах выше, потому что контент на мобильных сайтах располагается вертикально, поэтому при анализе проблем CLS рекомендуется разделять статистику для десктопов и мобильных;
— момент времени, когда останавливается сбор метрики CLS, для разных инструментов разный;
— в инструментах разработчика есть баги при измерении сдвига контента внутри iframe'ов, также есть несоответствия в инструментах для сбора синтетической статистики и статистики с устройств реальных пользователей;
— в некоторых случаях страницы с высоким CLS могут предоставлять хороший пользовательский опыт;
— CLS не учитывает элементы, которые ничего не рендерят.

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

#performance #metrics

https://nicj.net/cumulative-layout-shift-in-practice/

Томас Штейнер в блоге web.dev написал статью про текстовые фрагменты — "Boldly link where no one has linked before: Text Fragments".

В url страницы после символа # можно подставить идентификатор элемента, к которому браузер должен подкрутить страницу. Эта фича появилась очень давно, но у неё есть недостаток — на странице должен существовать элемент с необходимым идентификатором.

С помощью текстового фрагмента (text fragment) можно задать любой текст, который нужно "подсветить" на странице. Текстовый фрагмент задаётся в url страницы с помощью конструкций #:~:text=textStart или #:~:text=textStart,textEnd. Также можно указать необходимый контекст с помощью префиксов и суффиксов #:~:text=somePrefix-,text,-someSuffix.

Текстовый фрагмент — экспериментальная фича, её поддержка есть только в браузерах на базе Chromium. На данный момент участники W3C скептически относятся к изменению формата url, но Google уже начал использовать текстовые фрагменты в production-коде поисковых сниппетов.

#spec #experimental #chromium

https://web.dev/text-fragments/

Дэниэл Апплкуист — член W3C Technical Architecture Group — призывает сообщество присоединиться к разработке стандартов — "Why Get Involved in Web Standards?"

Дэниэл пишет о том, что он работает над улучшением прозрачности разработки web-стандартов и вовлечением в процесс большего числа разработчиков. Если вы думали над тем, чтобы присоединиться к разработке стандартов, но не знали с чего начать, то вам поможет Web Platform Contribution Guide. В нём рассказывается о процессе разработки стандартов и о том, как можно помочь. Также можно присоединиться к TPAC брейкаутам — докладам на тему разработки разных web-стандартов. Обычно брейкауты проводятся среди членов рабочих групп W3C, но в этом году в них может поучаствовать любой разработчик.

Если у вас есть какие-либо вопросы, то Дэниэл готов на них ответить. Все подробности можно найти в конце статьи.

#announcement #spec

https://dev.to/torgo/why-get-involved-in-web-standards-1p4h

Барри Поллард — автор книги "HTTP/2 in Action" и один из авторов "Web Almanac" — проанализировал данные Lighthouse из HTTP Archive и поделился своими находками — "What do Lighthouse Scores look like across the web?".

Всего лишь 10% сайтов были оценены больше 80 в категории производительности. Медианное значение оценки — 31. Это означает, что большинство сайтов неоптимизировано, и, скорее всего, работают медленно. Наиболее низкая оценка метрик приходится на Largest Contentful Paint (LCP) и Time to Interactive (TTI) — всего лишь 21% сайтов получили хорошую оценку по этим метрикам.

Лучше всего сайты показывают себя в категориях Accessibility и SEO. Хорошие оценки Accessibility объясняются набором типов проверок в Lighthouse. Нужно понимать, что в категории Accessibility оценка не говорит о том, что сайт доступен (можно написать недоступную страницу с оценкой 100), оценка говорит о том, что сайт следует основным советам для улучшения доступности.

Интересное исследование. Рекомендую почитать, чтобы получить больше понимания об оценках в Lighthouse.

#performance #a11y #research

https://www.tunetheweb.com/blog/what-do-lighthouse-scores-look-like-across-the-web/

Сегодня вышла седьмая версия npm. Майлз Боринс рассказал про новые фичи релиза — "Presenting v7.0.0 of the npm CLI ".

В npm v7 была добавлена поддержка воркспейсов (workspaces). С их помощью добавляется возможность удобного управления вложенными пакетами из корневого пакета.

В новой версии peerDependencies будут устанавливаться автоматически. В npm v6 установщику не предоставлялась информация о peerDependencies, поэтому их надо было устанавливать самостоятельно.

В package-lock используется новый формат, который гарантирует создание воспроизводимых сборок. Также была добавлена поддержка yarn.lock для получения информации о метаданных и разрешения зависимостей.

Ломающие изменения: автоматическая установка peerDependencies; теперь нельзя зареквайрить внутренние модули npm; npx был переписан, в новой версии он работает поверх npm exec, что повлекло за собой разные изменения; изменился вывод команды npm audit.

Седьмая версия будет поставляться с Node.js v15 (выходит на следующей неделе) или её можно установить самостоятельно ( npm i -g npm@7 ).

#npm #release #nodejs

https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/

Традиционный пост о том, что было опубликовано за последние две недели в Defront Plus:

— Что произошло с immutable.js, и какие есть альтернативы
— Результаты UX-исследований открытия ссылок в новом табе или окне
— Ошибки в CSS, которые делаются на автопилоте
— Понимание байткода V8
— Опыт уменьшения размера бандла Next.js-приложения
— Использование async_hooks в Node.js
— Как Goibibo улучшил бизнес-метрики web-приложения c помощью PWA
— Tota11y — поиск проблем с a11y
— Вам, возможно, не нужен date-fns
— Не доверяйте дефолтным таймаутам

Канал существует благодаря вашей поддержке. Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus.

Спасибо всем, кто читает и поддерживает Defront! Рад видеть, что канал приносит вам пользу.

https://www.patreon.com/myshov

Маниш Горегаокар — разработчик Servo — написал статью про сложности имплементации свойства font-size — "Font-size: An Unexpectedly Complex CSS Property".

Маниш разрабатывал Stylo — CSS-движок, написанный на Rust, который стал частью Firefox. Одной из его задач было добавление поддержки свойства font-size.

Проблема в том, что на размер шрифта влияют очень много факторов. Размер может быть задан разными юнитами и ключевыми словами. На него влияет выбранное семейство шрифтов, например, font-size: medium в рубленных шрифтах это 16 пикселей, а в моноширинных шрифтах — 13 пикселей. Также Firefox (из коробки) и Chrome (с помощью расширения) позволяют задавать размер шрифта в зависимости от текущего языка текста. Есть свои нюансы для задания размеров шрифта в MathML и при его использовании c аннотациями ruby.

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

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

#css #internals #firefox #specification

https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/

Вчера зарелизился Webpack 5 с огромным количеством изменений.

TLDR

В новой версии была улучшена скорость сборки. Была улучшена поддержка долгосрочного кэширования бандлов. Улучшен tree shaking. Реализован новый подход для работы с ассетами. Добавлена новая фича Module Federation. Удалены полифиллы для Node.js-модулей. Код сборки может генерироваться в стандарте ES2015.

Подробнее

Улучшена скорость сборки благодаря кэшированию на диске служебных данных между разными сборками (Persistent Caching).

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

Было упрощено использование ассетов. Теперь не нужно устанавливать дополнительные загрузчики, например, file-loader, url-loader, raw-loader. Сергей Мелюков в феврале публиковал статью про ассеты в Webpack 5, рекомендую почитать.

С пятой версии стала доступна ещё одна новая фича — Module Federation. Благодаря ей приложение может прозрачно заимствовать код из других приложений. Это позволяет делать интересные вещи, например, разделить одно большое SPA на несколько небольших. Это SPA с точки зрения пользователя будет работать как одно целое, но может разрабатываться и деплоиться разными командами независимо друг от друга.

Улучшена совместимость с Web-платформой: добавлена поддержка Top Level Await, JSON Modules, WASM Modules, import.meta.

Четвёртая версия Webpack могла генерировать код сборки только в стандарте в ES5. С пятой версии код сборки может генерироваться в стандарте ES2015.

Были удалены полифиллы для Node.js ( node.Buffer, node.console, node.process, crypto и т.п.) Когда появился Webpack, npm чаще всего использовали для распространения Node.js-модулей, поэтому в то время имело смысл поставлять со сборщиком полифиллы. Сейчас ситуация изменилась — в npm есть много кода, который можно использовать и в Node.js, и в браузерах. Также очень много внимания сегодня уделяют размеру генерируемого кода, а полифиллы Node.js могут добавлять очень много кода. Но не все рады удалению полифиллов. Синдре Сорхусу — автору многих библиотек в экосистеме Node.js — это решение не понравилось. Он пишет про то, что не будет исправлять проблемы, связанные с Webpack 5.

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

#webpack #release #bundle

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

Серджио Виллар в блоге Igalia написал пост о том, как они исправляли в WebKit проблемы с flexbox — “Closing the gap (in flexbox)”.

В WebKit накопилось большое количество проблем, связанных с flexbox. Много тестов из Web Platform Test не проходило. Ребят из Igalia наняли решить самые важные проблемы с флексами: исправить работу с min-width:auto и min-height:auto, исправить поведение flexbox-элементов внутри таблиц и наоборот, исправить проблемы с обработкой высоты, заданной в процентах, для контейнеров с неограниченными размерами. Среди самых важных изменений было добавление поддержки свойства gap. В статье разбираются наиболее интересные примеры неправильного поведения flexbox’ов в WebKit.

В статью стоит заглянуть, если хотите узнать подробнее о нюансах работы с flexbox.

#css #internals

https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/

Збигнев Банах написал статью про HSTS — "Why Websites Need HTTP Strict Transport Security (HSTS)".

Как правило, пользователи при переходе на сайт вводят его имя в адресную строку без протокола. Браузеры по умолчанию переходят на сайт по незащищённому протоколу HTTP. Для того чтобы браузер всегда использовал HTTPS-протокол, сервер на первый запрос должен отправить ответ с редиректом на HTTPS-версию сайта и с помощью заголовка Strict-Transport-Security передать дополнительную информацию о том, что сайт должен работать только HTTPS и закэшировать этот ответ. Время жизни кэша обычно устанавливают на год или два. В следующий раз при посещении сайта пользователь сразу попадёт на HTTPS-версию без редиректа.

Но есть небольшая проблема. Теоретически злоумышленник может перехватить первый запрос и заблокировать работу HSTS. Чтобы этого избежать, браузеры проверяют список сайтов, которые должны работать только по HTTPS (HSTS preload list). В этот список можно добавить свой сайт, но для этого нужно выполнить все условия, например, чтобы все поддомены работали по HTTPS.

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

#http #security

https://www.netsparker.com/blog/web-security/http-strict-transport-security-hsts/

В Chrome 86 HTTP-кэш становится изолированным. Что это означает рассказал Еиджи Китамура в статье "Gaining security and privacy by partitioning the cache".

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

Chrome 86 начал использовать для имени ключа кэша "Network Isolation Key", который состоит из имени сайта и сайта текущего фрейма (если фрейма нет, то будет использоваться имя сайта второй раз). У изолированного кэша есть небольшой недостаток — он может повлиять на метрики производительности сайта.

На данный момент изоляция кэша включена в Chrome и Safari. В Firefox она тоже поддерживается, но выключена по умолчанию (её можно включить с помощью флага privacy.firstparty.isolate в about:config ).

#chrome #cache

https://developers.google.com/web/updates/2020/10/http-cache-partitioning