Автор: Jojo

Модель: andreasezelius Софт: Сorona, 3ds Max

Обычный автокомплит показывает список под полем. Typeahead работает иначе: продолжение появляется прямо внутри строки, и за счет этого пользователь не прыгает взглядом между инпутом и выпадающим списком. На словах просто. На деле это почти полностью кастомное поведение, которое не совпадает с нативной логикой HTML-инпутов. Флориан Шульц очень хорошо разбирает, почему такая штука сложнее, чем кажется. Сначала он попробовал идти через реальное выделение текста, но на iOS это сразу развалилось из-за ручек выделения и странного поведения браузера. Потом пришел к overlay-подходу, где completion рисуется поверх инпута отдельным слоем, а дальше началась настоящая инженерия: beforeinput, кастомная обработка backspace, скрытие каретки, переполнение текста и даже проблема кернинга, из-за которой буквы начинали прыгать при вводе. Внутри: – Чем typeahead отличается от обычного автокомплита со списком подсказок; – Почему решение через реальное выделение текста ломается на мобильных; – Как работает overlay-подход с отдельным слоем поверх инпута; – Какие события приходится перехватывать, чтобы поведение было естественным; – Почему стандартный Highlight не дает одинаковый результат в разных браузерах; – Как обрабатывать состояния фокуса, очистки и переполнения текста; – Откуда берется проблема с кернингом при разбиении строки на span; – Как можно компенсировать этот сдвиг, не отключая кернинг полностью. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

кейс студии Koto

Часто пользуетесь этим способом? Работает? Делитесь в комментах

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

Кстати, Жан Карлу и его знаменитая работа для рекламы — Зубная паста «Gellé», 1938 год. Получив образование архитектора, он решил стать графическим дизайнером после того, как в результате ДТП лишился правой руки. Он был одним из авангардистов, стоящих у истоков нового европейского плаката. Когда ты архитектор, для тебя очевидно, что формообразование подчиняется единой системе, обратите внимание как линии, углы и окружности иллюстрации сочетаются с формой шрифта.

Стало удобнее анализировать данные: теперь можно выбрать нужный интервал и формат отображения статистики — по дням или по месяцам. Это пригодится, если вы хотите посмотреть статистику за конкретный период, например, во время рекламной кампании или сравнить динамику за несколько лет. Где найти: Настройки сайта 👉 Аналитика 👉 Посмотреть статистику #tildaupdates

Продолжаем с итогами второго сезона нашего рейтинга. Хотим внести небольшие корректировки в прошлый пост: Физические награды получают только ТОП-1 из каждой категории: Все, Бизнес и Дизайнеры. Так получилось, что тройка победителей в категории «Бизнес» совпадает с тройкой из категории «Все», поэтому не видим смысла дублировать и хотим сразу объявить ТОП-3 участников из категории «Дизайнеры»: 🎙 — 💙 никита xmentors.ru 🎙 — 💙 Дарья Тютикова 🎙 — 💙 Алёна Бровко По итогам второго сезона 2 физические статуэтки от нас получают ребята из 💙 wave и 1 статуэтку забирает 💙 никита Всех участников и их самые популярные работы уже можно посмотреть на сайте 🎙 А для тех, кто хочет легче набирать рейтинг за свои статьи, Дизайнерс подготовили 💙 Бизнес-Подписку — она добавляет чуть больше функционала и открывает больше возможностей в продвижении контента. Используйте промокод «DSGNERS2026» и забирайте 10% скидку на любой период подписки. С уважением, команда дизайнерс 🎙

от @vanokregular13 уже сегодня в 18:00! ❤️ приходите прокачать скорость и посмотреть на процесс дизайна с другого угла❤️ ❤️ записаться ❤️

→ Database — маппинг слоев в фигме с backend данными из JSON, CSV, вставка картинок по https// ссылкам. → Tokens — применение, экспорт, поддержка более 35 типов токенов: number, sizing, spacing, dimenstion, typography, transition, image, color, fill, shadow, glass и другие. → Генерация component и componentSet из JSON (через ИИ можно конвертировать любой компонент (VUE3, React) в JSON и на основе этого кода сгенерировать в Figma точно такой же компонент) → Интеграция дизайна в Storybook → Экспорт переменных из JSON в CSS, Swift, Kotlin прямо из плагина → Поддержка GitHub и GitLab → Поддержка Dev Mode для Frontend разработчиков → Восстановление связей с master компонентом или подключение открепленных инстансов к мастер компоненту → Поддержка Remote соединения с Agent AI Install plugin