​​🚀Оптимизируйте длинные задачи

В данной статье рассказывается о том, как оптимизировать работу задач JavaScript для улучшения производительности веб-приложений.

Читать...

​​🫥Прокачиваем вёрстку ARIA-атрибутами. Атрибут aria-hidden

В этой статье рассказывается об атрибуте aria-hidden, который позволяет скрыть элементы от пользователей скринридеров и улучшить доступность интерфейса.

Читать...

​​👾Скрытые возможности элемента <input>

В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях.

Читать...

​​😉Подбор цветов для палитры визуализации данных

В этой статье расскажу как подбирать цвета для палитры визуализации данных в профессиональных интерфейсах.

Читать...

​​😍Принципы хорошего дизайна интерфейсов. И причем здесь программисты?

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

Читать...

​​🎃Продуктовый дизайн. Инструкция по Agile методологии для новичка

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

Читать...

​​CSS text-wrap: balance

Начиная с Chrome 114, вы можете использовать сбалансированный перенос текста для заголовков с помощью свойства text-wrap со значением balance.

👉 Уровень поддержки согласно caniuse

Для балансировки текста браузер выполняет эффективный бинарный поиск наименьшей ширины, которая не вызывает переноса строки, останавливаясь на одном пикселе CSS (не экранном пикселе). Для дальнейшей оптимизации бинарного поиска браузер начинает с 80% средней ширины строки.

👉 Смотреть демо
👉 Более подробная статья

​​😻Топ-5 фишек UI/UX дизайна платформы контейнеризации

В этой статье хочу поделиться топ-5 фишек, созданных для консоли dBrain, чтобы превратить рутинную работу инженера по обслуживанию кластера в творческую.

Читать...

​​🏦Зачем банкам менять интерфейсы, и как это сделать, если вы тоже хотите

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

Читать...

​​🥷Как появляются дизайн-системы: рассказываем и показываем на собственном примере

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

Читать...

​​😶Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

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

Читать...

​​🎃Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы

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

Читать...

​​😬Это ужасно бесит — подборка косяков, постоянно встречающихся от сайта к сайту, от приложения к приложению

В этой статье мы рассмотрим некоторые из таких наиболее распространённых косяков.

Читать...

​​👀HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

В этой статье мы покажем, как HTML и CSS могут улучшить или ухудшить верстку.

Читать...

​​😎Роль UX/UI-дизайна в процессах автоматизации бизнеса на примере оформления ипотеки

В этой статье мы рассмотрим как можно улучшить юзабилити формы заявки на сайте с точки зрения UX/UI и автоматизации.

Читать...

Запоминайте меньше и достигайте большего с помощью логических свойств

Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.

button {
padding-inline: 2ch;
padding-block: 1ch;
}

article > p {
text-align: start;
margin-block: 2ch;
}

.something::before {
inset-inline: auto 0;
}

Поддержка браузерами:

👉 padding-inline: caniuse
👉 margin-block: caniuse
👉 inset-inline: caniuse

Как всегда удачи в экспериментах!

​​😎3 правила в веб-дизайне, которые упрощают жизнь разработчикам

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

Читать...

​​👿HTML: плохие стороны

В этой статье автор расскажет о некоторых проблемах HTML с точки зрения accessibility и usability, таких как использование атрибута multiple элемента select, недостатки элементов <i> и <datalist>, проблемы с кнопками disabled, а также несогласованность в работе нативного проигрывателя видео.

Читать...

​​🧑‍💻Пара HTTP-заголовков, о которых, похоже, не знают разработчики

В этой статье мы рассмотрим что такое HTTP-заголовки, какие их типы бывают и зачем они нужны.

Читать...

​​🎛Проектируем дизайн честного кредитного калькулятора

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

Читать...

​​⌨Руководство по проектированию интерфейсов с Drag and Drop

В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop.

Читать...