What We Know (So Far) About CSS Reading Order

#почитать

Предлагаемые CSS-свойства reading-flow и reading-order предназначены для указания исходного порядка элементов HTML в дереве DOM, или, проще говоря, как инструменты доступности определяют порядок элементов. Вы будете использовать их для того, чтобы порядок фокусировки фокусируемых элементов соответствовал визуальному порядку, как указано в Руководстве по доступности веб-контента (WCAG 2.2).

⏱Читать статью

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

#почитать

UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты.

⏱Читать статью

Улучшаем тексты в вебе при помощи text-wrap: pretty

#почитать

В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать.
Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению.
В цифровой типографике все слова располагает компьютер, а не человек. Веб-дизайнеры или разработчики часто создают шаблон, заполняемый различными версиями контента. Типографика в вебе не настраивается вручную, особенно в случае гибкой структуры текста, меняющейся в зависимости от формы и размеров экрана. Что же мы можем сделать, чтобы приблизиться к качеству традиционной типографики, сохранив при этом возможность механизации, привносимую современными компьютерами?
Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

⏱Читать статью

Optimizing PWAs For Different Display Modes

#почитать

Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. Declan covers how we can modify our app depending on what display mode is applied to mitigate these issues.

⏱Читать статью

Bounce Rate в веб-дизайне: как удержать пользователей на сайте

#почитать

Вы замечали, что посетители быстро покидают ваш сайт, едва заглянув на него? Это может быть связано с высоким bounce rate (показателем отказов) — процентом пользователей, которые ушли, не совершив никаких действий. Разберём, почему это происходит и как улучшить ситуацию через грамотный дизайн. В данной статье разберем:

- Что такое bounce rate и как его рассчитывают?
- Основные причины высокого bounce rate
- Влияние bounce rate на SEO
- Мифы о bounce rate
- Инструменты для отслеживания и анализа bounce rate

⏱Читать статью

CSS-селекторы. Шпаргалка для новичков

#почитать

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

⏱Читать статью

Дизайн для ленивых: как интерфейсы учатся думать за пользователя

#почитать

Современные пользователи цифровых продуктов подсознательно стремятся к минимальным когнитивным затратам. Это порождает новый тренд — «ленивый UX», где система берет на себя рутинные решения.

В этой статье разберем:
- Как алгоритмы упрощают взаимодействие
- Примеры удачных и провальных предугадываний
- Грань между удобством и навязчивостью

⏱Читать статью

Lottie — новый стандарт векторной анимации

#почитать

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

В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов.

⏱Читать статью

Если увлекаешься технологиями, не пропусти True Tech Champ 21 ноября — масштабный ИТ-фест от МТС 🔥

В программе:

📝 доклады о технологиях будущего от экспертов в ИИ, включая руководителя фундаментальных исследований MWS AI Валентина Малых;
🛻 шоу-битва роботов со спецэффектами и сюжетной линией;
📝 воркшоп по работе с ИИ-агентами от канадского разработчика и автора книги AI Agents in Action Майкла Ланэма, кодинг-практикум с MWS AI и интеллектуальный спарринг с искусственным интеллектом;
◻️ 20+ площадок с активностями: IT-Родео, робофайтинг, лазерный лабиринт и многое другое.
🔴 А в завершение дня — афтепати со звездным хедлайнером.

Фестиваль бесплатный, он пройдет 21 ноября в Москве и онлайн.
Смотри подробную программу на сайте и регистрируйся — количество мест ограничено.

Opening a Details Element from the URL

#почитать

Say you’ve got a page with a bunch of <details> elements on it.

Your goal is to be able to send someone to that page with one particular details element open.

I was doing just this recently, and my first thought was to do it server-side. If the URL was like website.com/#faq-1 I’d see if faq-1 matches an ID of the details element and I’d put the open attribute on it like <details id="faq-1" open>. But no, you don’t get to have the #hash as part of the URL server side (for whatever reason 🤷‍♀️).

⏱Читать статью

Замена YouTube Kids

#почитать

Что делать, когда твой ребёнок признаёт только это приложение? Вот не хочет пользоваться аналогами, и всё тут! Как убрать недостатки в такой ситуации и добавить достоинств? Об этом и поговорим.

Какие недостатки YouTube Kids я хотел бы убрать?

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

Невозможность ограничить доступ к любым мультфильмам, кроме заданного списка.

«Замедление» работы сервиса в России. Этот пункт обсуждать я не буду.

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

⏱Читать статью

Артефакты интернета: GeoCities, «Народ», uCoz и другие хостинг-экспонаты нулевых

#почитать

Нескончаемые гостевые книги, яркие анимированные баннеры и счётчики визитов… В нулевых каждый компьютерный энтузиаст мечтал о «своём месте» в интернете — даже если это был крохотный персональный сайт. Для этого существовали бесплатные хостинги: GeoCities, Tripod, FortuneCity, «Народ.ру», uCoz и им подобные. Сейчас это web-артефакты, но без них вряд ли были бы возможны современные соцсети и CMS. Я решил немного поностальгировать и вспомнить, как они работали и чем запомнились. Приглашаю под кат.

⏱Читать статью

Лигатуры в CSS: как сделать текст аккуратнее

#почитать

Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

⏱Читать статью

CSS :has() — проверка наличия потомков или соседних элементов

#почитать

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

⏱Читать статью