Привет, Хабр! Меня зовут Вадим, я мобильный разработчик в СберМаркете. В этой статье расскажу, как провести профилирование (оно же измерение производительности или оценка перформанса) в react native приложениях: как выявить источник проблем и решить их. В русскоязычных источниках не так много информации по данной теме. Я потратил немало времени, чтобы со всем разобраться, поэтому попытаюсь восполнить этот пробел и для вас :)
Дизайн
Новости
Line height в Android TextView: где не сходится с Figma, как мешает pixel-perfect, и как это решить
В крупных проектах уделяется большое внимание деталям: дизайнеры, аналитики и продуктовые менеджеры продумывают все до мелочей, чтобы максимально улучшить пользовательский опыт. В дизайне такой важной деталью становится pixel-perfect-вёрстка. Разработчики реализуют тонкости дизайна, но иногда происходит расхождение платформенного рендеринга Android TextView и Figma Text.
Форматы изображений в вебе (2024)
Сегодня трудно найти веб сайт, на котором нету хотя бы одного изображения, может быть у вас есть такой пример? На странице в интернете можно сразу увидеть много разных изображений: фото пользователя в личном кабинете, фото товара на маркетплейсе, иконка на вкладке браузера, иконка корзины на кнопке «добавить в корзину», анимированное изображение‑открытка от бабушки в мессенджере, [и еще тысяча примеров].
Если вы как‑то связаны с вебом то вам будет полезно иметь общее представление об этих images, как минимум, и уметь с ними работать как максимум. Давайте попробуем разобраться с этим вопросом?
Почему реактивность без VDOM (с реальным DOM) лучше, чем реактивность с VDOM?
Всем привет! В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.
Истории
Между строк: Создание элементов интерфейса через VectorApi Unity UI Toolkit
В недалеком прошлом, я рассказывал, про то, как можно создавать свои кастомные элементы через генерацию мэша, будет полезно ознакомиться для понимания многих аспектов этой статьи.
Сегодня будем разбирать альтернативный способ создания, использую VectorApi.
Рассмотрим, как работает painter2D, какими функциями обладает и зачем оно может вам пригодиться.
Эволюция главного экрана: хаос, исследования и редизайн
Всем привет! Меня зовут Анна Бугрий, я старший продуктовый дизайнер и работаю в сфере шесть лет. Последние два года создаю совершенный опыт и дизайн для пользователей СберМаркета. Команда, в которой я работаю, отвечает за главный экран приложения и навигацию на всех платформах.
В этой статье я расскажу, как мы решились полностью переделать главный экран, какие исследования для этого потребовались и как мы проходили этот сложный путь.
Адаптация мобильного приложения для пользователей скринридеров. Опыт Яндекс Лавки
Приложениями пользуются разные люди, и некоторым из них для этого нужны вспомогательные технологии — например, скринридеры (программы экранного доступа). Такие программы могут озвучить контент на странице, если приложение соответствует определённым стандартам. Например, они могут прочесть текст из параграфов и заголовков, списки, альтернативные описания изображений, ссылки, переключатели и другие интерактивные элементы. Таким образом скринридеры обеспечивают доступ незрячих пользователей к контенту и сервисам.
Повышая доступность интерфейса для пользователей скринридеров, мы также улучшаем его доступность и для людей с другими особенностями здоровья. Например, для тех, кто использует системную настройку «Экран вслух» или взаимодействует с интерфейсом с помощью голосового управления.
Однако навигация со скринридерами по страницам и экранам отличается от обычной, поэтому нужно соблюдать несколько правил при сборке интерфейса приложений.
Привет! Я Вячеслав Дорогинин, занимаюсь фронтендом WebView клиентского приложения Лавки. В этой статье расскажу, как мы адаптировали приложение для работы с популярными скринридерами, с какими трудностями столкнулись и как их решили.
Впихнуть невпихуемое: как в НИЦ «Технологии» разрабатывали корпуса для IP-камер
Максим Тулов в своем обзоре удивился нашим "самодельным" корпусам и спросил почему бы не воспользоваться готовым китайским решением. IP-камера довольно типовой продукт, и подходящих решений на любой площадке — хоть отбавляй. Так зачем изобретать велосипед?
О причинах, а также о том как по пути изобрести пару велосипедов с треугольными колесами и пойдет сегодня речь.
Инклюзивность и цифровая доступность в дизайне: почему это важно для всех
Всем привет! Меня зовут Юля Алёхина, я дизайнер в AGIMA. В этой статье поговорим об инклюзивном дизайне, о том, почему он касается не только людей с инвалидностью и как правильно аргументировать важность доступности в общении с заказчиком. Еще расскажу, как наш дизайн-отдел учился работать с доступностью, о наших новых целях и планах на будущее.
6 лет из жизни инди-разработчика
А привет, Хабр. У меня для тебя есть история длиной в шесть лет. История о том, как я учился делать свои собственные игры без навыков программирования и что из этого вышло. Почему так долго и почему так делать не стоит. Настоящий ориджинал контент, от А до Я. Где такое найдешь сейчас, а? Тут, правильно.
Я постарался достать самое интересное из того, что со мной произошло. И про игры, и про гранты. Упаковать это всё в простой и понятный текст со своими иллюстрациями, естественно. Не страшно? Ну тогда давай, бери большую кружку, наполняй кофеином и погнали.
История «Dark Mode»: как «баг» стал «фичей»
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте. Она окрашивает фоновые элементы графического интерфейса в темный цвет, а текст — в белый.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию. Например, популярный в веб-разработке (и не только) Sublime Text.
Нельзя сказать точно, когда именно появился термин «темный режим», однако за последние несколько десятков лет темный вариант графического интерфейса превратился в набирающую обороты функцию в самых популярных приложениях, сайтах и операционных системах.
Тем не менее отображение информации белым по темному существует очень давно — еще до появления технологии ЭЛТ, на смену которой впоследствии пришли ЖК и OLED.
Не баг, а фича: видеоигровые баги, которые стали классикой
Даже в AAA‑играх могут быть ошибки. Чаще всего сталкиваться с багами неприятно, однако иногда они могут войти в геймплей целого жанра или вовсе стать основой целой франшизы видеоигр. Разработчикам может будет полезным что‑то позаимствовать.
В комментариях пишите о других известных багах, которые повлияли на игровой процесс в играх, особенно сделанных студиями родом из России.
В качестве бонуса в конце — небольшая подборка багов, которые превратились в мемы.
Как сделать универсальный компонент List Cell в Figma
Я покажу свой способ сборки компонента List Cell, объясню, почему считаю его гибким, а также приложу ссылку на Figma. Я решил рассказать об этом потому, что не нашёл подходящих материалов, как собрать свой List Cell.
Ближайшие события
Анимируем 3d-персонажа в Unity3D: скачиваем модель персонажа, скачиваем анимации
Первая часть анимирования 3d-персонажа в Unity3d. В статье скачаем 3d-модель персонажа, скачаем скелетные анимации и импортируем их в проект unity.
Генерация картинок на любом железе без Midjourney
Для генерации изображений сегодня существует множество сервисов. Некоторые из них платные, другие нет. И даже в большинстве бесплатных сервисов вы можете столкнуться с ограничениями, например, на количество бесплатных картинок за единицу времени, разрешение изображений и прочее. Это обстоятельство объясняется просто. Несмотря на доступность технологии, железо, которое требуется для генерации, остается дорогим. И бесплатно отдавать ресурсы GPU мало кому хочется. Однако, тягу к бесплатному трудно победить. Поэтому в этой статье мы узнаем, как, всё же, генерировать изображения только при помощи браузера и нескольких строк кода.
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- К чему приводят распространённые ошибки с элементом
<label>
; - Лучший лайфхак с
inputmode="numeric"
улучшающий мою жизнь; - Как пользователи скринридера понимают, что модальное окно открыто.
Давайте начнём!
C3D Collision Detection: представление детектора столкновений в составе C3D Toolkit
Сергей Белёв, старший математик‑программист, C3D Labs, знакомит с новым компонентом C3D Toolkit — модулем C3D Collision Detection, рассказывает о том, что детектор столкновений представляет собой изнутри, и о том, какие возможности он предоставляет пользователям.
Детектор столкновений — новый компонент инструмента C3D Toolkit. В статье перечислим математические задачи, которые поставлены перед детектором, узнаем его основной функционал, рассмотрим несложный пример, демонстрирующий интерфейс модуля, и обратимся к планам и дорожной карте.
Обнаружение столкновений подразумевает постановку следующих математических задач. Первая — это возможность уметь находить пересечения между собой среди множества объектов и делать это быстро, без поиска самого пересечения. Требуется оперативно отвечать на соответствующий вопрос — «да, пересекаются» / «нет, не пересекаются». Следующая задача состоит в классификации касаний между собой этого множества объектов. Каждое касание является пересечением, но не наоборот, и важно уметь выделять этот частный случай пересечения. Помимо этого, актуальна задача поиска минимального расстояния между сборками тел и телами, а также задача классификации взаимного расположения объектов. Примером служит детектирование «вложения тел» («тело в теле»), недавно внедренное нами в ответ на многочисленные запросы пользователей. Важно отметить, что все эти задачи нужно уметь решать как в статике, так и в динамике.
Модуль C3D Collision Detection, во‑первых, реализует «эффективные» алгоритмы решения всех поставленных задач — как в статических сценах, например контроль зазоров, так и в динамических сценах, в частности контроль соударений между элементами сборки. Во‑вторых, у нас есть возможность тонкой настройки всех формулируемых задач — можно даже создавать их комбинации. В‑третьих, исходя из необходимости быстро детектировать касание/пересечение, применяется принципиально иной подход, чем в булевой операции: мы не строим какие‑либо дополнительные объекты.
Интерфейсы для производств — это не сайты штамповать
Стоит только коснуться производственной специфики, как стандартные подходы разваливаются на куски — даже если у вас уже есть огромная дизайн-система на основе популярной методологии Material Design. Я — Аня Труфанова, делаю дизайн для MES (manufacturing execution system). Нам пришлось взять дизайн-систему и наполнить ее уникальными фичами и кастомными компонентами, адаптированными под нестандартные условия. Сейчас я поделюсь, что именно мы переосмыслили и какие фичи добавили.
Как складывался «анимешный» стиль в играх (и не только) и какую роль во всём этом сыграл Такабатакэ Касё
Большеглазые тонкие красавицы и изящные, андрогинного вида юноши уже стали маркером аниме-индустрии, особенно сегмента, рассчитанного на девушек («сёдзё»). В Японии эти образы имеют вполне конкретные названия — «бисёдзё» для прекрасных дев, и «бисёнен» — для хрупких красивых юношей.
Аффордансы – главные подсказки функциональной сути игровых объектов
С развитием виртуальных миров и интерактивных сред, вопросы проектирования игровых объектов становятся всё более актуальными. Одним из ключевых понятий в дизайне игрового пространства является аффорданс – концепция, зародившаяся в экологической психологии Джеймса Гибсона и обозначающая возможности действия, которые предоставляет среда живому организму. В контексте видеоигр аффордансы выступают как неявные подсказки для игрока относительно того, как можно использовать тот или иной объект.