Космические лучи и ошибки в программах

В университете у меня был предмет по теории управления. Там преподаватель рассказывал про альфа-частицы и протоны из космоса, переключающие биты в процессоре и ломающие программы. На эту тему на youtube-канале Veritasium было опубликовано видео — "The Universe is Hostile to Computers".

Ошибки, вызванные подобными явлениями, называются нарушениями в результате единичного события (single-event upset, SEU). Их учитывают при проектировании микроэлектроники и при разработке программного обеспечения, которое должно надёжно работать в условиях высокой радиации и повышенного влияния космических лучей. По этой причине в космосе вычисления дублируют на независимых компьютерах, а NASA во многих космических миссиях использует специальную версию процессора PowerPC — RAD750. По сравнению с обычными процессорами RAD750 в 30 раз более устойчив к возникновению SEU.

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

#programming #debug #video

https://www.youtube.com/watch?v=AaZ_RSt0KP8
https://www.youtube.com/watch?v=jOTM9T59IX4 (на русском языке)

28 октября в 19:00
Tech Talks Зарплаты.ру в Новосибирске

Tech Talks — это тематическая дискуссионная группа, открытый микрофон. Нет деления на докладчика и участника: наравне участвуют все, кто хочет. Модератор встречи задаёт и поддерживает общий вектор.

Будет две части:

До синьора и обратно: как развиваться в IT?
Поговорим о софт и хард скиллах, системе грейдов, карте роста, скорости, возрасте. Что такое стратегия развития и где искать помощи — будем разбираться вместе.

Деградируем правильно!
Трэш IT-квиз, пиво и разговоры о технологиях — что ещё нужно, чтобы отключиться от спринтов, конфколлов и дедлайнов? Призы победителям, конечно! Отдыхаем, нетворкаем и репетируем конец рабочей недели в компании коллег.

Место проведения: Новосибирск, Красный проспект 22, "Типография".

Регистрация на таймпэде: https://zarplata-ru-events.timepad.ru/event/1822099/

P.S. Велком пиво и еда от Зарплаты 🍻

Уменьшение размера npm-пакетов AWS SDK

Тривикрам Камат из Amazon написал статью про опыт уменьшения размера npm-пакетов — "How we halved the publish size of modular AWS SDK for JavaScript clients".

Тривикрам работает над JavaScript-версией AWS SDK, который используется в окружениях с жёсткими квотами, поэтому размер npm-пакетов играет важную роль. Для сокращения объёма устанавливаемого кода были удалены JSDoc-комментарии из JS- и d.ts-файлов, сгенерированных с помощью библиотеки downlevel-dts для старых версий TypeScript. Был удалён исходный TypeScript-код и сорсмапы. Для удобства отладки запланирован релиз специальной дебаг-версии пакетов.

Благодаря удалению лишнего кода размер пакетов уменьшился на ~50%.

#npm #optimization #typescript

https://aws.amazon.com/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/

Привет!

Несколько часов назад угнали пакет ua-parser-js, и опубликовали три вредоносные версии, возможно с криптомайнером.

Библиотека с 8 лямов скачиваний в неделю, активно используем в tramvai.

Удалить пакеты так просто автор кажется не сможет из-за политики npm после leftpad, поэтому рекомендую проверить зависимости в своих проектах, и по необходимости зафиксировать версию ua-parser-js на 0.7.28

Информации пока немного, завел issue - https://github.com/faisalman/ua-parser-js/issues/536

Надеюсь, что всё-таки скоро откатят пакет, но предупредить будет не лишним)

Новые возможности управления кешом в HTTP

Тим Пэрри написал статью про новые HTTP-заголовки для управления кешом и упрощения отладки проблем кеширования — "New HTTP standards for caching on the modern web".

Современные веб-приложения используют разные уровни кеширования, начиная кешом браузера и заканчивая кешами балансера и CDN. Для упрощения отладки проблем кеширования был добавлен HTTP-заголовок Cache-Status, с помощью которого можно отследить прохождение запроса через все уровни кеширования.

Для более тонкого управления кешом в стандарт был добавлен Targeted Cache-Control. По сути это обычный Cache-Control, который можно использовать для точечного управления кешами. Akamai и Cloudflare уже поддерживают CDN-Cache-Control, Akamai-Cache-Control и Cloudflare-CDN-Cache-Control. В будущем возможно появление Client-Cache-Control и других подобных заголовков.

Тим пишет, что Cache-Status и Targeted Cache-Control находятся на стадии черновика, но спецификации уже не будут меняться кардинально.

#http #cache #spec

https://httptoolkit.tech/blog/status-targeted-caching-headers/

Автоматическая тёмная тема в Chrome

В Origin Trial Chrome 96 на Android появится поддержка автоматической тёмной темы — "Auto Dark Theme".

Автоматическая тёмная тема — это автоматическая адаптация цвета фона страницы и текста под тёмную тему операционной системы без вмешательства разработчика.

Сейчас автотема находится на этапе эксперимента, поэтому при её использовании есть неудобства. Для тонкого управления цветами отдельных элементов нужно с помощью JavaScript определить поддержку автотемы, выставить класс на корневом элементе и использовать его в CSS-правилах.

Есть возможность отказа от автотемы с помощью метатега <meta name="color-scheme" content="only light">. Также для отключения автотемы на всей странице или отдельных её элементах можно использовать CSS-декларацию color-scheme: only light.

#ux #chrome

https://developer.chrome.com/blog/auto-dark-theme/

Веб-версии Adobe Photoshop и Illustrator

На конференции Adobe MAX 2021 были представлены веб-версии Photoshop и Illustrator. Томас Натстад и Набель Аль-Шама рассказали о технологиях, которые сделали веб-версию Photoshop возможной — "Photoshop's journey to the web".

Веб-версия Photoshop использует WebAssembly и кодовую базу своего старшего брата. Чтобы производительность приложения была хорошей, порт использует новые фичи WebAssembly и Emscripten: многопоточность, SIMD и поддержку обработки исключений. Для поддержки современных дисплеев используется новое цветовое пространство P3 в canvas.

Интерфейс Photoshop построен на веб-компонентах с помощью библиотеки LitElement. В некоторых частях приложения используется React.

Photoshop for Web поддерживает только базовые функции редактирования изображений и комментирование. Также на презентации была представлена веб-версия Adobe Illustrator, но на данный момент она пока недоступна.

Adobe Photoshop и Illustrator работают только в Chrome и Edge.

#webassembly #announcement

https://web.dev/ps-on-the-web/

Оптимизация прокрутки Google Search Console

Йохан Исакссон рассказал, как он улучшил производительность прокрутки большого списка Google Search Console — "How I made Google’s data grid scroll 10x faster with one line of CSS".

Йохан не работает в Google, но много работает с Google Search Console — SEO-инструмент Google. Он обратил внимание, что при прокрутке списка с 500 элементами производительность перерисовки страницы падает до 5-7 fps. Как оказалось, прокрутка большого списка приводит к перерасчёту раскладки тридцати тысяч DOM-элементов страницы.

Для решения этой проблемы Йохан воспользовался CSS-свойством contain, с помощью которого можно изолировать отдельные части страницы, чтобы их изменение не влияло на производительность рендеринга всей страницы:

table {
  contain: strict;
}

После внесённого изменения производительность рендеринга улучшилась в 10 раз.

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

#performance

https://medium.com/@johan.isaksson/how-i-made-googles-data-grid-scroll-10x-faster-with-one-line-of-css-78cb1e8d9cb1

P.S. Благодарю @oleg_log за ссылку на статью

Релиз Next.js 12

Три дня назад была представлена новая мажорная версия Next.js — "Next.js 12".

Next.js 12 по умолчанию использует swc для транспиляции JavaScript- и TypeScript-файлов. Swc — это очень быстрый аналог Babel, написанный на Rust. Благодаря ему время production-сборки стало в пять раз меньше. В три раза уменьшилось время обновления страницы при локальной разработке.

Была добавлена поддержка миддлвар для гибкой модификации HTTP-ответа. В зависимости от входящего запроса можно изменить ответ, добавить новые HTTP-заголовки, сделать редирект и т.п. Миддлвары могут работать на edge-серверах Vercel, улучшая отзывчивость приложения.

Была проведена работа для подготовки к переходу на React 18. В экспериментальном режиме доступны серверные компоненты и новый поточный серверный рендерер с поддержкой Suspense.

Теперь по умолчанию в Next.js используется ESM с поддержкой импорта CommonJS-модулей. Добавлена экспериментальная поддержка импорта модулей по URL.

В компоненте <Image> появилась поддержка формата изображений AVIF. Также компонент автоматически определяет основное изображение страницы, которому нужно передать пропс priority для улучшения метрики LCP.

В рамках нового релиза была опубликована библиотека @vercel/nft (Node File Tracer). Она используются для генерации облегчённых standalone-сборок Next.js-приложений для serverless-окружений и контейнеризации.

В Next.js 12 поисковым ботам будут отдаваться полностью отрендеренные страницы, использующие Incremental Static Regeneration. Обычные пользователи будут видеть интерфейс загрузки страницы.

В ломающих изменениях отказ от Webpack 4, деприкейт опции target, использование <span> вместо <div> в next/image, увеличение минимальной поддерживаемой версии Node.js с 12.0.0 до 12.22.0

#release #jsframeworks #react

https://nextjs.org/blog/next-12

Числа, которые должны быть известны каждому

Пол МакЛелан рассказал о числах, которые должны знать все программисты — "Numbers Everyone Should Know".

По интернету давно гуляет список Питера Норвига со временем тика CPU, доступа к L1, L2-кешам, доступа к памяти и т.п. В статье Пола этот список обновлён и расширен новыми пунктами: временем доступа к L3-кешу, временем передачи TCP-пакета в пределах датацентра, из Америки в Европу и обратно и т.п.

Обновлённый список:
— Тик CPU: 0.3 нс
— Доступ к L1: 0.5 нс
— Стоимость ошибки предсказания ветвления в CPU: 5 нс
— Доступ к L2: 3 нс
— Доступ к L3: 28 нс
— Доступ к памяти (DRAM): 100 нс
— Передача 2 Kб по 1 Gbps-сети: 20,000 нс
— Последовательное чтение 1 Мб данных из памяти: 250,000 нс
— Передача TCP-пакета в пределах одного датацентра: 500,000 нс
— Обращение к SSD: 100,000 нс
— Обращение к магнитному жёсткому диску: 10,000,000 нс
— Последовательное чтение 1 Мб данных из сети: 10,000,000 нс
— Последовательное чтение 1 Мб данных с жёсткого диска: 30,000,000 нс
— Время передачи TCP-пакета из Калифорнии в Европу и обратно: 150,000,000 нс
— Время на написание одного слова: 1 c
— Время на открытие PowerPoint на macOS: 10 с

Величину разрыва между этими цифрами можно прочувствовать в масштабе. Если бы тик CPU занимал одну секунду, то время передачи TCP-пакета из Калифорнии в Европу и обратно составляло бы десять лет, а PowerPoint открывался бы тысячелетие.

#programming

https://community.cadence.com/cadence_blogs_8/b/breakfast-bytes/posts/numbers-everyone-should-know

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

— Проблема новичков-экспертов
— Проблемы использования видео в вебе
— Как ускорить сборку TypeScript-проекта
— Зачем инженерам пробовать себя в консалтинге
— Руководство по git без использования команд git
— Почему в фреймворках не используются веб-воркеры
— Читабельный HTML в 100 байт CSS
— Таинственный Script Error
— Непростой выбор между SPA и MPA
— Как заручиться поддержкой коллег
— Проблемы критического CSS
— Системные цвета в CSS
— Ванильный JavaScript как замена jQuery
— Оптимизация производительности автодополнения
— WeakMap на практике

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, оплату медицинских услуг, покупку еды, аренду квартиры и т.п.

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

https://www.patreon.com/myshov

Потенциальные проблемы с Firefox 100 и Chrome 100

Близится день, когда Firefox и Chrome дойдут до сотой версии. Это не просто красивая цифра, но и потенциальная причина ошибок.

Немного истории. Opera стала первым браузером, дошедшим до версии 10. В альфа-версии десятки поломались сайты, неправильно парсившие User-Agent. Их логика парсинга предусматривала только одну цифру в версии, поэтому Opera 10 превращалась в Opera 1, ломая отображение сайта.

Подобная ситуация может случиться с Firefox 100 и Chrome 100, если логика парсинга не предусматривает трёхзначные числа. Поэтому разработчики браузеров рекомендуют проверить работу своих проектов с изменением версии браузера в User-Agent. Разработчики Chrome пошли немного дальше и сделали специальный флаг #force-major-version-to-100, который автоматически подымает версию Chrome до 100.

#announcement #web

https://developer.chrome.com/blog/force-major-version-to-100/
https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready

Подходы использования SVG и их производительность

Тайлер Ситка сравнил производительность разных методов использования SVG на HTML-страницах — "Which SVG technique performs best for way too many icons?".

Самым производительным способом добавления SVG стал элемент <img> c data URI — 72 мс для 1000 иконок. Но при таком подходе невозможно стилизовать SVG с помощью внешних стилей. Наиболее сбалансированным способом для оптимизированных SVG оказался инлайнинг — 87 мс для 1000 иконок. Самым медленным способом стала CSS-маска — 150 мс.

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

#benchmark #performance #svg

https://cloudfour.com/thinks/svg-icon-stress-test/

Релиз Angular 13

Сегодня вышла новая мажорная версия Angular. Марк Томпсон рассказал о всех нововведениях релиза — "Angular v13 is now Available".

— С этой версии больше недоступен View Engine — движок рендеринга, предшествующий Ivy. Благодаря его удалению открываются возможности сокращения времени компиляции, которые будут реализованы в будущем

— Изменён формат внешних модулей Angular Package Format (APF): добавлена поддержка ES2020, удалена необходимость использования ngcc

— Включена поддержка сохранения кеша сборки для ускорения скорости бандлинга. Прирост составляет 68%. Также в Angular CLI v12.2 была добавлена поддержка esbuild, который ускорил время сборки production-бандлов на 10%

— Упрощено API для динамического создания компонентов

— По умолчанию включена инвалидация окружения при прогоне каждого теста

— Улучшена доступность компонентов Angular Material

— RxJS обновлён до версии 7.4, TypeScript обновлён до версии 4.4

— Прекращена поддержка IE11. Пользователи Internet Explorer могут продолжать использовать Angular 12. Он будет поддерживаться до ноября 2022 года

#angular #release #jsframeworks

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Поиск необработанных промисов

Свизек Теллер написал статью про ошибки, приводящие к возникновению необработанных промисов — "Finding unresolved promises in JavaScript".

Необработанные промисы — это большой источник проблем, который может привести к крешу программы. Они возникают при забытом перехвате исключения с помощью catch, при отсутствующем вызове resolve / rejet или при забытом return в цепочке промисов.

Свизек нашёл научную статью "Finding broken promises in asynchronous JavaScript programs", в которой авторы попробовали автоматизировать поиск подобных ошибок и создали утилиту PromiseKeeper. Идея интересная, но похоже, что работу над проектом остановили после публикации статьи.

#async #js #experimental

https://swizec.com/blog/finding-unresolved-promises-in-javascript/

Компроментация npm-пакетов coa и rc

В четверг были скомпрометированы npm-пакеты coa и rc. На первый пакет приходится 7 миллионов загрузок в неделю, на последний — 14 миллионов.

Во взломанных пакетах был размещён Windows-троян, который воровал сохранённые пароли, данные кредитных карт и т.п.

На данный момент вредоносные версии пакетов уже удалены, но специалисты по безопасности рекомендуют на всякий случай проверить в системе наличие вредоносных файлов: compile.js, compile.bat, sdd.dll. Для предотвращения подобных инцидентов npm советует включить двухфакторную аутентификацию.

#npm #security

https://www.bleepingcomputer.com/news/security/popular-coa-npm-library-hijacked-to-steal-user-passwords/

Оптимизация загрузки ресурсов с помощью хинтов приоритета (Priority Hints)

Лина Сохони, Эдди Османи и Патрик Минан рассказали про хинты приоритета — механизм для упрощения оптимизации загрузки ресурсов — "Optimizing resource loading with Priority Hints".

Хинты приоритета (Priority Hints) — это атрибут importance HTML-элементов <img>, <link>, <script> , <iframe> и одноимённая опция в fetch(). Они поддерживают три приоритета: low, high и auto. Пример ускорения загрузки LCP-изображения: <img src="lcp_image.png" importance="high">.

Хинты приоритета используются в качестве сигналов на уровне разметки документа. Благодаря им у разработчиков появляются удобные рычаги для регулирования последовательности загрузки ресурсов. Управлять приоритетом можно было и раньше с помощью preload, но это требовало ручной кропотливой работы, приводящей к частым ошибкам в приоритизации загрузки. Также хинты приоритета решают задачи, которые невозможно или неудобно решать с помощью preload: уменьшение приоритета загрузки скриптов, увеличение приоритета async-скриптов.

Хинты приоритета также доступны в fetch(): fetch('https://...', {importance: 'low'}. По умолчанию fetch() загружает ресурсы с высоким приоритетом. С помощью хинта теперь можно уменьшать приоритет загрузки.

Поддержка атрибута importance существовала ранее в Chrome 73-76, но была удалена из-за проблем с preload, которые исправили в Chrome 95. Хинты приоритета будут доступны в рамках Origin Trial в Chrome 96-100.

#performance

https://web.dev/priority-hints/

Сценарии использования HTML-элемента dialog

Сэм Торогуд из Google рассказал про сценарии использования элемента <dialog> — "In Defence Of Dialog".

Элемент <dialog> предназначен для создания диалоговых окон. Нативный HTML-диалог поддерживает автоматический захват фокуса при переходе по Tab и устраняет проблемы с контекстом наложения без использования JavaScript.

В статье рассказывается про создание одного и нескольких модальных окон с помощью <dialog>, про реализацию открывающегося сайдбара с закрытием по затемнённому фону, про предотвращение прокрутки при открытии окон. Также из статьи узнал про method="dialog" в формах. Если форма с method="dialog" находится внутри <dialog>, то она будет автоматически закрыта при отправке формы. Для всех сценариев использования в статье есть интерактивные демки.

У нативного диалога трагичная судьба — процесс его проникновения в основные браузерные движки занял десять лет. На протяжении этого времени его даже однажды хотели удалить из спецификации. Сейчас поддержка <dialog> есть в Chrome, в Firefox за экспериментальным флагом и в Safari Technology Preview 134.

#html

https://whistlr.info/2021/in-defence-of-dialog/

Моделирование пользовательских сценариев в Lighthouse

Брендан Кенни рассказал про Flow API Lighthouse, благодаря которому становится возможен комплексный анализ страницы — "Lighthouse user flows".

Доступ к Flow API возможен из puppeteer-скриптов. Он позволяет протестировать загрузку страницы с прогретым кешом, подготовить страницу перед прогоном проверок и отследить метрики производительности на заданном промежутке времени.

Flow API — это большой шаг для Lighthouse, так как теперь в лабораторных условиях можно получить полноценные значения метрик, зависящих от пользовательского ввода. Например, сейчас можно открыть страницу и программно вызвать прокрутку, отслеживая изменение метрики CLS. По умолчанию Lighthouse не отслеживает изменение CLS и отображает значение, полученное сразу после загрузки страницы.

#performance #tool

https://web.dev/lighthouse-user-flows/

Новые единицы измерения CSS, зависящие от области просмотра

Брамус Ван Дамм рассказал про новые единицы измерения, которые недавно были добавлены в спецификацию CSS Values and Units Level 4 — "The Large, Small, and Dynamic Viewports".

Довольно давно в браузерах появилась поддержка единиц измерений vw, vh, vmax, vmin. Их используют для ограничения размера элемента размером доступной области просмотра и для заполнения вьюпорта содержимым на мобилках. Когда создавалась спецификация, всё было логично. Однако ситуация изменилась, когда Safari стал скрывать части интерфейса во время прокрутки. Размер вьюпорта стал меняться динамически, и страницы, использующие vh, стали перекрываться интерфейсом браузера.

Для решения этой проблемы были придуманы разные хаки, а CSSWG разработала новые единицы измерения, более тонко учитывающие поведение вьюпорта:

— lvw, lvh, lvmax, lvmin — единицы относительно вьюпорта браузера со скрытыми элементами интерфейса (префикс "l" — large viewport)
— svw, svh, svmax, svmin — единицы относительно вьюпорта браузера без скрытых элементов интерфейса (префикс "s" — small viewport)
— dvw, dvh, dvmax, dvmin — единицы относительно вьюпорта, учитывающие динамическое изменение интерфейса (префикс "d" — dynamic viewport)

На данный момент новые единицы измерения не поддерживаются ни в одном браузере, но первые коммиты для их поддержки уже были добавлены в WebKit.

#css #spec #mobile

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/