Вчера вышел Firefox 79. Флориан Шольц и Гарольд Киршнер рассказали про все новинки релиза — "Firefox 79: The safe return of shared memory, new tooling, and platform updates".

В конце 2018 года из-за атаки Spectre во всех браузерах были отключены разделяемая память (SharedArrayBuffer) и таймеры с высоким разрешением. В Firefox 79 поддержка этих фич вернулась на место, но для их использования страница должна быть изолирована с помощью HTTP-заголовков Cross-Origin-Opener-Policy: same-origin и Cross-Origin-Embedder-Policy: require-corp. Возврат поддержки SharedArrayBuffer также позволил реализовать WebAssembly Threads.

Добавлена поддержка Promise.any(). При передаче коллекции промисов в any() метод возвращает промис, который разрезолвится в том случае, когда разрезолвится один из переданных промисов или вернёт AggreateError, если все промисы будут реджекнуты. Добавлена поддержка логических операторов присваивания, WeakRef и FinalizationRegistry.

Для предотвращения модификации window.opener Firefox теперь автоматически устанавливает rel=noopener для всех ссылок с target=_blank.

Очень много изменений в инструментах разработчика. Стектрейсы теперь показывают полноценный стек для асинхронного кода. Флоу перехода от js-ошибок из консоли в дебаггер стал более продуман: после перехода проблемный код будет подсвечен, а при наведении будет выведена подсказка с типом ошибки. Улучшена поддержка соурс мапов в DOM-инспекторе для SCSS и CSS-in-JS. В отладчике появилась новая фича “Restart Frame”, которая позволяет "путешествовать во времени" в рамках стека вызовов. Также отладчик снова получил порцию обновлений, улучшающих производительность.

#release #firefox

https://hacks.mozilla.org/2020/07/firefox-79/

Амелия Ваттенбергер написала интерактивную статью про использование процентов в CSS — "What does 100% mean in CSS?".

В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для height процент высчитывается относительно высоты родителя
- для width — относительно ширины родителя
- для top — относительно высоты родителя
- для left — относительно ширины родителя
- для margin-top — относительно ширины родителя
- для margin-left — относительно ширины родителя
- для padding-top — относительно ширины родителя
- для padding-left — относительно ширины родителя
- для translate-top — относительно высоты элемента
- для translate-left — относительно ширины элемента

Очень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.

#css

https://wattenberger.com/blog/css-percents

Гергели Орос — технический руководитель из Uber — рассказал про алгоритмы и структуры данных, с которыми ему приходилось сталкиваться на протяжении карьеры — "Data Structures & Algorithms I Actually Used Working at Tech Companies".

В статье есть много примеров использования алгоритмов: от обхода DOM-дерева для добавления поддержки голосового ввода для Skype на Xbox OS до гексогональных гридов с иерархическими индексами в Uber для оптимизации цены поездок. Интересная задача была в Skyskanner с поиском наиболее дешёвых билетов с маршрутом через несколько городов. Для её решения была использована модифицированная реализация алгоритма A*.

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

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

#algorithm #musings

https://blog.pragmaticengineer.com/data-structures-and-algorithms-i-actually-used-day-to-day/

На прошедшем WWDC 2020 была представлена внутренняя статистика о использовании протоколов интернета на устройствах Apple. На zdnet по этому поводу была опубликована небольшая статья.

Разработчики рассказали, что в мае 2020 года около 79% сайтов, которые открывались с помощью Safari, были загружены по HTTP/2. По сравнению с HTTP/1.1 страницы загружались на 80% быстрее. При использовании IPv6 медианное время установки соединения было на 40% быстрее чем при использовании IPv4. Такое уменьшение объясняется уменьшенным использованием NAT и улучшениями в маршрутизации. 49% всех сетевых соединений на современных устройствах Apple использовали TLS 1.3; HTTPS-соединение устанавливалось на 30% быстрее по сравнению c TLS 1.2.

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

#performance #apple

https://www.zdnet.com/article/apple-tells-app-devs-to-use-ipv6-as-its-1-4-times-faster-than-ipv4/

Крис Лили — технический директор W3C — рассказал о проблемных частях CSS — "Why is CSS... the way it is?".

В спецификации CSS у некоторых фич есть недостатки. Например, свойство float плохо специфицировано для сложных случаев. Работа с цветами неудобна при реализации дизайн систем или просто для определения цвета английскими словами ( gainsboro, orchid и т.п. ничего не говорят об оттенке). Есть проблемы при работе с диапазонами Unicode-значений в свойстве unicode-range.

Некоторые эти проблемы связаны с тем, что во времена зарождения спецификации было важно, чтобы язык был максимально простым. Простота реализации была важна для добавления CSS в Internet Explorer и Netscape Navigator. Другие проблемы были связаны с тем, что при ревью новых фич у проверяющих не было необходимого опыта.

Все эти проблемы известны. Над ними либо работают в данный момент (например, с цветами), либо эти проблемные фичи были заменены более продвинутыми альтернативами (например, вместо float для разметки страницы сейчас рекомендуется использовать flex и grid ).

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

#css #history

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/

Джошуа Голдберг в своём блоге задокументировал процесс добавления новой фичи в TypeScript — "TypeScript Contribution Diary: // @ts-expect-error".

Джошуа добавил поддержку новой директивы // @ts-expect-error в TypeScript 3.9. С её помощью можно подавить конкретные ошибки компилятора. В статье очень подробно рассказывается, как была добавлена эта фича, что было изменено, почему это было сделано именно так, с какими проблемами столкнулись пользователи после релиза RC-версии, какие были фиксы и т.п. Например, в начальной реализации для JSX не учитывался случай использования директивы игнорирования ошибок подобным образом:

{/*
// @ts-ignore */}
<MissingRequiredProp />

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

#internals #typescript

http://blog.joshuakgoldberg.com/ts-expect-error/

А пока последние две недели в основном канале публиковалось самое интересное из мира фронтенда и около него, в Defront Plus были опубликованы такие посты:

- Использование title в SVG
- Оптимизация метрики time-to-logo на Wikimedia
- Имена элементов и доступность
- Как писать хорошие комментарии
- Юзабилити ссылок mailto
- Принцип работы Certificate Transparency
- Как написать такой email, на который ответят
- Сравнение QUIC и TCP
- Исследование эффективности технических собеседований
- Восстановление поддержки Shared Memory в Firefox

Поддержите канал на Patreon и получите доступ к дополнительным статьям в Defront Plus!

https://www.patreon.com/myshov

Ашан Фернандо написал статью про преимущества сбора телеметрии на фронтенде — "Importance of using JavaScript Telemetry for Single Page Apps".

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

Интересная статья, но в ней ничего не рассказывается про альтернативные решения для сбора телеметрии.

#performance

https://blog.bitsrc.io/importance-of-using-javascript-telemetry-for-single-page-apps-9805b8ffd563

Гари Чу — devrel из Google — опубликовал статью про проблемы использования транспилированного кода в современных браузерах — "Bringing Modern JavaScript to Libraries".

На данный момент многие библиотеки из npm транспилируются в ES5. Это проблема, так как даже если проект не поддерживает legacy-браузеры, он должен "заплатить налог" в виде размера бандла. Этот налог для разных библиотек может быть как 7%, так и 40%.

В январе 2020 года в Node.js 13.7.0 появилась поддержка условных экспортов, с помощью которых можно указать разные сборки для разных типов окружений. Гари предлагает добавить новый тип окружения в условный экспорт для бандлов, которые транспилируются в ES2017 (один из возможных вариантов — browser2017 ). Предполагается, что бандлеры могут использовать это окружение для создания облегчённой версии бандла приложения. Также рассматривается вариант публикации  кода без транспиляции, но в этом случае увеличится время сборки.

Очень полезное предложение. Думаю, что бандлеры адаптируют предлагаемый подход или как минимум придут к какому-нибудь другому альтернативному решению

#proposal #perfomance #npm

https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c

На сайте Developer Apple была опубликована статья про использование одноразовых SMS-кодов, привязанных к домену, — "Enhance SMS-delivered code security with domain-bound codes".

Современные смартфоны предоставляют средства для автозаполнения поля с SMS-кодом, который отправляется пользователю при включённой двухфакторной аутентификации или подтверждения каких-либо операций. Сейчас автодополнение кодов работает на любых страницах, которые используют поле ввода с атрибутом autocomplete=one-time-code. Проблема в том, что этим могут пользоваться фишинговые сайты.

Apple и Google работают над механизмом для ограничения домена, на котором может быть автодополнен отправленный SMS-код. На данный момент (в будущем возможны изменения) это можно сделать с помощью специально отформатированного SMS:

123456 is your Example code.

@example.com #123456

Привязанные к домену коды можно использовать в iOS 14 и macOS Big Sur. На Android эта фича скорее всего появится в одном из следующих релизов.

#security #mobile

https://developer.apple.com/news/?id=z0i801mg
https://github.com/WICG/sms-one-time-codes

Юна Кравец и Владимир Левин рассказали про новое CSS свойство content-visibility, благодаря которому можно ускорить время рендернига страницы — "Сontent-visibility: the new CSS property that boosts your rendering performance".

Свойство content-visibility опирается на примитивы, определённые в спецификации CSS Containment, которые задаются с помощью свойства contain. С помощью этих примитивов разработчик может тонко настроить поведение рендеринга блоков. Свойство contain может быть разных типов в разных комбинациях. Определение наиболее эффективной комбинации значений может быть нетривиальной задачей. Свойство content-visibility решает эту проблему.

Благодаря свойству content-visibility браузер самостоятельно определяет необходимую комбинацию contain-примитивов, откладывая рендеринг контента до момента, пока он не попадёт во вьюпорт. При этом рендеринг ускоряется минимум на 50% (в примере из статьи рендеринг ускорился в семь раз).

Новое свойство будет доступно в Chrome 85. Разработчики Firefox отозвались положительно об этой фиче, но пока над её внедрением не работают.

#css #performance

https://web.dev/content-visibility/

В техническом блоге Facebook была опубликована статья про подходы улучшения доступности, которые были использованы на новом сайте социальной сети, — "Making Facebook.com accessible to as many people as possible".

Основные пункты статьи. Чтобы не допускать распространённых ошибок доступности, используют eslint-плагин eslint-plugin-jsx-a11y. Для работы с фокусом используют специальные компоненты, которые также упрощают добавление навигации с клавиатуры. Для улучшения читабельности текста на этапе сборки конвертируют размер шрифта в rem. Иерархия заголовков в документе поддерживается автоматически с помощью специального API. Улучшили работу горячих клавиш с помощью API на базе React контекста. Для валидации разметки используют самописный инструмент, который подсвечивает красным оверлеем все элементы с проблемами a11y.

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

#a11y #react #facebook

https://engineering.fb.com/web/facebook-com-accessibility/

Пол Кальвано — специалист в области web-производительности из Akamai — написал статью про Back/Forward кэш и его влияние на производительность — "Browser Back/Forward Caches and their Benefit to Web Performance".

В Firefox и Safari используется Back/Forward Cache (BF Cache). В нём сохраняется состояние страниц, которые пользователь посещал ранее, благодаря чему браузеру не нужно повторно строить DOM при навигации по истории с помощью кнопок Back/Forward. Если страница находится в BF Cache, то она загружается очень быстро.

В Chrome 86 BF Cache будет включён по умолчанию для всех пользователей. Это значит, что если вы собираете пользовательские метрики, то стоит ожидать падение количества загрузок сайта, так как инструменты мониторинга не отправляют статистику для страниц, полученных из BF Cache. Также стоит ожидать небольшое повышение времени загрузки, так как некоторые переходы по истории больше учитываться не будут.

#performance #cache #chrome

https://paulcalvano.com/2020-08-03-browser-backforward-caches-and-their-benefit-to-web-performance/

Лия Веру написала пост про использование CSS OM для получения списка CSS-свойств — "Introspecting CSS via the CSS OM: Getting supported properties, shorthands, longhands".

Лия работает над CSS-частью web-альманаха. Для исследования данных ей понадобился всех список всех CSS-свойств и соответствующих сокращённых свойств. Для получения списка свойств можно использовать Object.getOwnPropertyNames(document.body.style) (в Firefox необходимо использовать прототип `style`). Для того чтобы узнать, является ли данное свойство сокращённой формой записи, нужно добавить это свойство HTML-элементу и получить список свойств, в которые он был развёрнут:

function getLonghands(property) {
  let style = document.body.style;
  style[property] = "inherit";
  let ret = [...style];
  style.cssText = "";
  return ret;
}

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

#css

https://lea.verou.me/2020/07/introspecting-css-via-the-css-om-getting-supported-properties-shorthands-longhands/

Вышел React 17.0.0 Release Candidate, в котором нет новых фич. Главное изменение — синтетические события теперь регистрируются не в document, а в том узле DOM, в котором рендерится дерево React. Это позволит использовать несколько версий библиотеки без конфликтов, а также позволет упростить обновления в следующих версиях. Ещё одно изменение, связанное с событийной системой реакта: теперь события React ближе к нативным событиям, больше нет необходимости использовать e.persist(). Другие изменения: очистка в useEffect теперь вызывается асинхронно, вывод ошибки при возврате undefined из forwardRef и memo (как это происходит с обычными компонентами в React 16), улучшения стек трейсов, а также были убраны некоторые внутренние экспорты.

Андрей Мелихов опубликовал на хабре статью "Архитектура современных корпоративных Node.js-приложений".

Фронтенд-разработка в больших проектах давно вышла за границы работы с представлением. Фронтендеры должны поддерживать сервер-сайд рендеринг и жонглировать ответами от разных бэкендов. В статье рассказывается про подход с организацией логики уровня приложения с помощью BFF (Backend For Frontend). Разбираются плюсы и минусы нескольких подходов разделения приложения на слои. В качестве примера реализации используется фреймворк Nest, по ходу дела разбираются его ограничения.

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

#architecture #nodejs

https://habr.com/ru/company/yandex/blog/514550/

Эдди Османи недавно написал статью об оптимизации метрики CLS для списков с бесконечным скроллом — "Infinite Scroll without Layout Shifts".

Для организации больших списков в web'е используют пагинацию, подгрузку по кнопке "загрузить больше" и бесконечную подгрузку элементов списка при прокрутке контента. Бесконечная прокрутка считается самым проблемным решением с точки зрения a11y. Если не прилагать особых усилий, то подвал сайта будет постоянно сдвигаться из-за подгрузки новой порции контента, ухудшая метрику CLS (Cumulative Layout Shift).

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

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

#performance #ux

https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/

В блоге Google Артур Жанк и Лукас Вайксельбаум рассказали про новые фичи безопасности web-платформы, которые были добавлены за последние несколько лет, — "Towards native security defenses for the web ecosystem".

Разработчики браузеров и авторы спецификаций работали над защитой от инъекций и улучшением изоляции между сайтами. Trusted Types и Content Security Policy (CSP) решают проблему XSS. Благодаря Trusted Types потенциально небезопасные API становятся доступны только доверенному коду. CSP предоставляет защиту от server side XSS. Для улучшения изоляции сайтов в платформу были добавлены Fetch Metadata Request Headers и Cross-Origin Opener Policy (COOP). С помощью Fetch Metada к запросам привязывается метаинформация, на основе которой сервер может отклонить запрос. Благодаря COOP добавляется уровень изоляции между сайтами, когда один сайт открывает другой сайт в новой вкладке/окне.

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

#security

https://security.googleblog.com/2020/07/towards-native-security-defenses-for.html

Хакатон «Build for Belarus» пройдёт онлайн 14–16 августа. Участники помогут разработать технические решения для коммуникации, безопасности и поддержки пострадавших в протестах.

Сайт хакатона https://eventornado.com/event/build-for-belarus
Событие на Фейсбуке https://www.facebook.com/events/492050428325842

В Chrome 86 будет запущен эксперимент с изменением адресной строки — "Helping people spot the spoofs: a URL experiment".

В фишинге часто используют измененённые доменные имена известных сайтов, которые у обычных пользователей не вызывают подозрения. В исследовании команды Chrome 60% пользователей были введены в заблуждение, когда в URL находилось название бренда с опечаткой. Чтобы вывести адрес сайта на первый план, Chrome будет отображать в адресной строке только домен (при наведении на него курсором будет отображаться полный URL).

Если вы попадёте в эксперимент, то включить привычное отображение можно будет с помощью пункта "Always show full URLs” в контекстном меню адресной строки. Посмотреть новую фичу можно в Chrome Canary или Dev, включив флаги #omnibox-ui-reveal-steady-state-url-path-query-and-ref-on-hover, #omnibox-ui-sometimes-elide-to-registrable-domain.

#ux #chrome

https://blog.chromium.org/2020/08/helping-people-spot-spoofs-url.html?m=1