🔥 Typeahead в духе Spotlight выглядит как мелочь, но внутри это очень нетривиальный UI-паттерн
Обычный автокомплит показывает список под полем. Typeahead работает иначе: продолжение появляется прямо внутри строки, и за счет этого пользователь не прыгает взглядом между инпутом и выпадающим списком. На словах просто. На деле это почти полностью кастомное поведение, которое не совпадает с нативной логикой HTML-инпутов.
Флориан Шульц очень хорошо разбирает, почему такая штука сложнее, чем кажется. Сначала он попробовал идти через реальное выделение текста, но на iOS это сразу развалилось из-за ручек выделения и странного поведения браузера. Потом пришел к overlay-подходу, где completion рисуется поверх инпута отдельным слоем, а дальше началась настоящая инженерия: beforeinput, кастомная обработка backspace, скрытие каретки, переполнение текста и даже проблема кернинга, из-за которой буквы начинали прыгать при вводе.
Внутри:
– Чем typeahead отличается от обычного автокомплита со списком подсказок;
– Почему решение через реальное выделение текста ломается на мобильных;
– Как работает overlay-подход с отдельным слоем поверх инпута;
– Какие события приходится перехватывать, чтобы поведение было естественным;
– Почему стандартный Highlight не дает одинаковый результат в разных браузерах;
– Как обрабатывать состояния фокуса, очистки и переполнения текста;
– Откуда берется проблема с кернингом при разбиении строки на span;
– Как можно компенсировать этот сдвиг, не отключая кернинг полностью.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
А давайте просто на красивое посмотрим?😍
Warp Tools
Плагин трансформирует любые объекты с помощью инструментов Smudge, Twirl, Bulge, Pinch, Arc и Free Transform
Install
А как у вас дела обстоят с цветами?😂
Минутка классики:
Кстати, Жан Карлу и его знаменитая работа для рекламы — Зубная паста «Gellé», 1938 год. Получив образование архитектора, он решил стать графическим дизайнером после того, как в результате ДТП лишился правой руки. Он был одним из авангардистов, стоящих у истоков нового европейского плаката.
Когда ты архитектор, для тебя очевидно, что формообразование подчиняется единой системе, обратите внимание как линии, углы и окружности иллюстрации сочетаются с формой шрифта.
Архитектор Дарья Кармазина запустила очень милый проект по имени «Секретики».
«Секретики» — популярная советская дворовая игра, заключавшаяся в создании тайников с сокровищами: дети накрывали фантики, цветы, бусины и другие маленькие предметы накрывали кусочкам стекла и закапывали в землю.
А в проекте под «секретиками» понимаются городские локации — те места, где мы живём или часто бываем и которые полны неявных сокровищ. Даша начала с района Москвы, который хорошо знает — Бутово: согласитесь, довольно неочевидная сокровищница. Скоро должны появиться ещё Запрудня и Подольск.
Пока это авторский проект, но есть идея сделать из него коллективный атлас, так что если у вас есть любимые места, которыми вы готовы поделиться, прокручивайте сайт вниз — там есть контакты автора.
Обновление: RenameItems v2.0
1. Переработал весь интерфейс и кодовую базу. Переименование и поиск с заменой разделил на две вкладки.
2. В поиск опционально добавил: регулярные выражения (RegEx), точный поиск по регистру строки (Match Case) и отдельных слов (Whole Word).
Например, с RegEx шаблоном \scopy.* можно стирать копии из имён слоёв.
Логика запуска осталась прежней:
• выбраны объекты — переименование объектов или родительских слоёв,
• ничего не выбрано — переименование слоёв и артбордов
Подробнее о скрипте
#illustrator #item
⚡️ Новое видео: 7 нейросетей, которые нужны каждому дизайнеру одежды
Нано Банана/Nano Banana, НьюАрк/NewArc, Стайл 3Д/Style 3D, Лук Фэшн/Look Fashion и ещё 3 сервиса — полный разбор в одном видео!
Глаза разбегаются от количества нейросетей? Я собрала 7 лучших инструментов, которые реально пригодятся дизайнеру: от примерок и узоров до 3Д-моделирования.
В ролике:
🕒 00:00 - Зачем вообще столько нейросетей?
🕒 00:17 - Нано Банана/Nano Banana (Леонардо ИИ/Leonardo AI) — 150 токенов бесплатно каждый день
🕒 01:41 - НьюАрк/NewArc — эскиз + ткань = фотореалистичные изображения
🕒 03:35 - НьюБлэк/NewBlack — Сервис с доской вдохновения, для возрастных и plus-size моделей
🕒 06:30 - Стайл 3Д/Style 3D — 3Д и примерка на животных
🕒 08:50 - Фермат/Fermat — для командной работы (дорого, но мощно)
🕒 11:15 - Лук Фэшн/Look Fashion — режим реального времени и работа с АйПад/iPad
🕒 12:43 - Паттернд ИИ/Patterned AI — бесшовные узоры и примерка на изделии
➕ Бонус: ссылки на все сервисы и бесплатный гайд 50 нейросетей — в описании!
📺 Смотреть на YouTube
📺 Смотреть Rutube
📺 Смотреть VK
📺 Смотреть Дзен
Сохраняйте, чтобы не потерять, и покажите тому, кто тоже хочет прокачать свои дизайн-проекты с помощью ИИ 🔥
Я в ВК | Я в Мах
Думали это всё? А нет!
Продолжаем с итогами второго сезона нашего рейтинга.
Хотим внести небольшие корректировки в прошлый пост:
Физические награды получают только ТОП-1 из каждой категории: Все, Бизнес и Дизайнеры.
Так получилось, что тройка победителей в категории «Бизнес» совпадает с тройкой из категории «Все», поэтому не видим смысла дублировать и хотим сразу объявить ТОП-3 участников из категории «Дизайнеры»:
🎙 — 💙 никита xmentors.ru
🎙 — 💙 Дарья Тютикова
🎙 — 💙 Алёна Бровко
По итогам второго сезона 2 физические статуэтки от нас получают ребята из 💙 wave и 1 статуэтку забирает 💙 никита
Всех участников и их самые популярные работы уже можно посмотреть на сайте 🎙
А для тех, кто хочет легче набирать рейтинг за свои статьи, Дизайнерс подготовили 💙 Бизнес-Подписку — она добавляет чуть больше функционала и открывает больше возможностей в продвижении контента.
Используйте промокод «DSGNERS2026» и забирайте 10% скидку на любой период подписки.
С уважением, команда дизайнерс 🎙
🆕 Календарь в статистике сайта
Стало удобнее анализировать данные: теперь можно выбрать нужный интервал и формат отображения статистики — по дням или по месяцам.
Это пригодится, если вы хотите посмотреть статистику за конкретный период, например, во время рекламной кампании или сравнить динамику за несколько лет.
Где найти: Настройки сайта 👉 Аналитика 👉 Посмотреть статистику
#tildaupdates