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 «ушел на чашку чая», когда пользователь отошел от графического визуального интерфейса.

Скотт О'Хара написал статью про деактивацию ссылок с учётом вопросов доступности — "Disabling a link".

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

Полностью отключить ссылку можно удалением атрибута href. После удаления href скринридеры не будут считать ссылку ссылкой, поэтому нужно добавить role="link". Чтобы скринридеры анонсировали неактивный статус, нужно добавить aria-disabled="true".

В коде деактивированная ссылка с учётом всех требований будет выглядеть так:

<a role="link" aria-disabled="true">
  Learn something!
</a>

#a11y #html

https://www.scottohara.me/blog/2021/05/28/disabled-links.html

Хотите работать в кибербезопасности? Команда экспертов HackerU запускает новую программу, которая обеспечит вам путь в профессию — «Специалист по информационной безопасности».

Что в программе гарантирует успешный результат?

— Сильнейшие преподаватели-эксперты, которые поработали с Тинькофф Банк, Альфа-Банк, Positive Technologies, IBM, BI. ZONE, Insolar
— 80% практики, решение реальных рабочих задач, в том числе в формате CTF
— Только «живые» вебинары и неограниченное общение с экспертами
— 3 этапа обучения с проверочными тестированиями
— Готовые проекты в портфолио по анализу защищенности сетей, веб-приложений и систем

По окончанию обучения вы получите диплом и станете секьюрити-специалистом, который успешно управляет требованиями ИБ в проектах, а также проводит внешние и внутренние пентесты.

Начать можно уже сейчас! Записывайтесь на бесплатный пробный урок и получите 40% скидку на обучение: https://is.gd/bZm3y8

Vela Sans — бесплатный гротеск Равида Балалиева.
Представляет собой модификацию семейства Manrope. 7 прямых начертаний + вариативная версия.

Скачать: https://www.behance.net/gallery/118694463/Vela-Sans-Free-font-family

#sans #free_sans

Тестирование фронтенда для всех. Евгений Клименченко с обзором подходов и инструментов для тестирования веб-приложений.

https://css-tricks.com/front-end-testing-is-for-everyone/

Полезный каталог бесплатных шрифтов в Телеграме: @fontsch

🔹 На канале удобная система хэштегов, помогающая найти нужный шрифт.
🔹 Главная фишка канала - любой шрифт можно протестировать прямо в телеге в 1 клик!
P.S. А еще админы запустили магазин футболок с крутыми принтами! @FontShoper