[Перевод] Разработка настоящих компонентов: блок сообщения Facebook Messenger

Скрипты и советы | 14 ноября 2021 937

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании RUVDS.com, Разработка веб-сайтов, CSS, Дизайн, Социальные сети и сообщества, дизайн, ruvds_перевод,

Смесь любопытства и тяги к исследованиям снова привели меня к системе обмена сообщениями Facebook. Я уже изучал компоненты Facebook и писал об этом. Сейчас я обратил внимание на то, что в одни только блоки для вывода сообщений чата вложена огромная работа. На первый взгляд может показаться, что разработка компонента, реализующего чат — это просто, что у составных частей такого компонента будет не особенно много вариаций.

Если же вникнуть в тему работы с сообщениями, то окажется, что один только интерфейс чата — это такая штука, при создании которой нужно учесть невероятное количество деталей. Особенно — если это чат некоей платформы, сравнимой по масштабам с Facebook.



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

Источник: Уроки CSS на Хабрахабре

[Перевод] Искусство компонентов. Пишем карточку контакта Facebook Messenger

Вполне возможно оценить компонент и сказать, что он легко пишется на HTML и CSS. Соглашусь, это легко, когда вы...

Подробнее
[Перевод] Интересные CSS-находки в новом дизайне Facebook

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

Подробнее
Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По...

Подробнее
[Перевод] Интересные CSS-находки в дизайне Twitter

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

Подробнее
[Перевод] CSS :has() селектор

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

Подробнее
Создаем кнопку с Ripple Effect для XMars UI

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

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями