Эдди Османи написал статью про использование Puppeteer для анализа производительности сайта — "Web Performance Recipes With Puppeteer".

Puppeteer — это библиотека для автоматизированного управления браузерами (Chrome, Edge, Opera, Firefox). Её используют для пререндеринга страниц SPA-приложений, для тестирования, генерации скриншотов страницы и т.п.

В статье Эдди делится Puppeteer-скриптами, которые могут быть полезны для решения проблем производительности. Например, для оценки влияния стороннего кода, для получения метрик производительности (FCP, LCP, CLS), для поиска утечек памяти, для измерения FPS страницы и многого другого.

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

#performance

https://addyosmani.com/blog/puppeteer-recipes/

Сара Суайдан рассказала об оптимизации содержимого страницы для режима чтения — "Design for reading: tips for optimizing content for Reader modes and reading apps".

Стили страницы могут быть доступны не для всех пользователей, например они недоступны для пользователей RSS-ридеров или при использовании режима чтения в браузере. Поэтому очень не рекомендуется размещать контент на уровне стилей. Если с помощью разметки нельзя выразить текущее визуальное представление (например, сложную анимацию), то нужно добавить её описание. Иногда, наоборот, нужно скрыть какую-либо часть контента в режиме для чтения. В этом случае может помочь глобальный атрибут hidden.

Основная мысль статьи. Наш контент не всегда выглядит так, как мы этого хотим. Это не должно иметь большого значения, если поддерживать строгое разделение между контентом и стилями; контент будет доступен всем пользователям.

#html #css

https://www.sarasoueidan.com/blog/tips-for-reader-modes/

Брайан Карделл из Igalia поделился планами по прототипированию поддержки CSS-селектора :has() — "Can I :has()".

Cелектор :has() добавляет в CSS возможность стилизации элемента на основе его содержимого. Это единственный селектор в таком роде — другие селекторы работают по направлению от детей к родителям. Он появился в черновике спецификации Selectors Level 4 в 2011 году, но до сих пор не был имплементирован в браузерах. Основная сложность заключается в том, что :has() ломает принципы работы со стилями, которые лежат в основе многих оптимизаций, благодаря которым браузеры могут поддерживать стабильные 60 fps.

На протяжении десяти лет в рабочей группе CSS возникали обсуждения по поводу :has(), но они никуда не вели, потому что никто не брался за прототипирование. Недавно компанию Igalia наняла компания eyeo (разрабатывает Adblock Browser и Adblock Plus) для того, чтобы сдвинуть эту фичу с мёртвой точки. Ребята планируют сделать прототипы и в принципе понять, возможно ли реализовать :has() без проблем для производительности. Этот эксперимент определит дальнейшую судьбу селектора. Либо он будет добавлен в браузеры, либо его функциональность будет реализована в другом виде, например, на уровне DOM API.

#css #experimental

https://bkardell.com/blog/canihas.html

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

— Приоритизация загрузки ресурсов HTML-страницы
— Островная архитектура (Islands Architecture)
— Неизвестный HTML
— Zx — утилита для упрощения работы с shell-скриптами
— Разработка компонента для просмотра введённого пароля
— Недостатки снапшот-тестов
— Opossum — реализация паттерна circuit breaker в Node.js
— Разочарование в JPEG XL
— Как убедить других разработчиков в правоте своей идеи
— Преимущества и недостатки сабсеттинга шрифтов

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

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

https://www.patreon.com/myshov

Дэн Вандеркам рассказал о ситуациях, в которых система типов TypeScript проявляет свою ненадёжность (unsoudness) — "The Seven Sources of Unsoundness in TypeScript".

Надёжная система типов гарантирует соответствие статических типов в коде программы фактическим типам на этапе её выполнения. В TypeScript система типов ненадёжна. Более того разработчики языка осознанно не преследуют цель создания надёжной системы типов, потому что это противоречит более важной цели — максимально поддержать паттерны и подходы, используемые в JavaScript. Поэтому при использовании TypeScript нужно учитывать потенциальные проблемы, чтобы код не взорвался в продакшене.

Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.

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

#typescript

https://effectivetypescript.com/2021/05/06/unsoundness/

Learn CSS — An evergreen CSS course

https://web.dev/learn/css/

На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам

Динамический и статический роутинг в React

#jsarticle #javascript #react #webassembly

Шрифтовик? Назови все шрифты!

Печальная правда о пропуске копий в C++
[ Статья ]

#вакансии 

Ищут Middle backend/fullstack C#/.Net разработчиков в команду развития криптовалютного обменника Netex24.net для работы с блокчейн проектами.

Стек:
C#, .Net Core 2.2, MS SQL Server, Javascript, Vue.js, AngularJS

Требования: 
— Уверенное знание C#
— Опыт работы с .NET не менее 3-х лет
— Знание технологии ASP .NET WebApi2
— Опыт работы с БД MS SQL

Будет плюсом:
— Знание HTML, CSS
— Знание JavaScript, AngularJS, Vue.js
— Знание основ криптографии и их применение

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

Условия:
— удаленка + редкие командировки для совместной работы в коворкинге
— З/П до 250 000 рублей (обсуждается по результатам собеседования)

Отклик: @HRDforIT

Нативная валидация ввода в CSS. София Валитова рассказывает про HTML-атрибуты на полях ввода и CSS-псевдоклассы, которые позволяют проверять корректность введённых данных.

https://ariarzer.dev/native-css-validation.html

Работа с параметрами в EEPROM
[ Статья ]

Stm32 + USB на шаблонах C++. Продолжение. Делаем CDC
[ Статья ]

CSS для метрик Web Vitals. Кейти Хемпениус и Юна Кравец о том, как стили влияют на качество и скорость интерфейсов и что можно сделать, чтобы улучшить CLS и LCP и получить хорошие очки в Lighthouse.

https://web.dev/css-web-vitals/

Как ускорить JavaScript в WebAssembly. Лин Кларк разбирается, зачем может понадобиться запускать JS не в браузерном JS-движке, как это устроено и как сделать это максимально эффективно.

https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

Когда решил устроить редизайн и забыл про пользователей 😅

#юмор #UX | uxorn

Формальные методы. Часть IV. Модель PIE в интерфейсах

Одной из первых абстрактных формальных моделей, которая пыталась описать обратную связь взаимодействия человека к машине была модель PIE, разработанная в середине 1980-х годов. Модель PIE рассматривает интерактивную систему с точки зрения ввода-вывода. Пользовательский ввод - это некоторые последовательности основных команд (например, отдельные клики мыши, нажатия клавиш). Набор последовательностей команд был назван P (что означает «программа»). Пользовательские команды интерпретируются системой (I обозначает эту функцию), вызывая «эффекты» (E) различного рода, от вызова строки состояния и до звукового сигнало.

Обычно в модели описывались два класса эффектов: более постоянные результаты (R), такие как распечатанный документ, и мгновенное отображение (D). Последний, «дисплеей», также включал такие эффекты, как тактильная или слуховая обратная связь. Одна из достоинств использования такой формальной модели заключается в том, что вместо того, чтобы спорить о том, какое представление было лучшим, можно было записать способ их сопоставления друг с другом:

Для любого p ∈ P определим
I p by:
I p( q ) = I( pq )

То есть I p описывает функциональность системы, как если бы когда вы дошли до нее, последовательность команд p уже была введена. Очевидно, это будет актуально
к проблеме UX «ушел на чашку чая», когда пользователь отошел от графического визуального интерфейса.