Text Magic

Это плагин, который позволяет быстро генерировать тексты по шаблону, с переменными или из CSV-файла Install ️

→ 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

Но перед этим хотим сказать, что для нас самое важное — это вы! Все, кто читает наши каналы и рассылки, кто пришёл на митап, слушал, шутил и задавал вопросы. Для нас это очень много значит. И, конечно, отдельное спасибо ВКПБ — студиям Deza и Lovemedo, которые всё это организовали. Кстати, на митапе волшебным образом у нас случилась 105% явка. Вот такая шрифтовая магия получается •ᴗ• А теперь сами материалы! Пойдём в порядке лекций: 🐶 Лично от Дениса Васильева: 🌞Большая коллекция бесплатных шрифтов 🌞«Что делать, если нет бюджета на шрифты»  🌞Статья о том, как бесплатно попробовать шрифты 🌞Большая статья о шрифтовых лицензиях 🐶 Красота от Томы Стрельцовой: 🌞О двух техниках древнерусской каллиграфии 🌞Декоративный шрифт Red Klin 🌞Шрифт на основе кириллических букв Сергея Чехонина Список книг, который Тома обещала: 🌞Книга про буквы от Аа до Яя, Юрий Гордон 🌞Designing type, Karen Chang 🌞Основа стиля в типографике, Роберт Брингхерст 🌞Живая типографика, Александра Королькова 🌞The stroke theory of writing, Gerrit Noordzij 🌞Про леттеринг, Джессика Хиш 🌞Искусство каллиграфии, Дэвид Харрис 🌞The origin of the serif, Edward Katich 🐶 Шрифтовая магия от Саши Корольковой: Для начала красивая мысль, с которой Саша начала свою лекцию. Любая достаточно развитая технология неотличима от магии — Артур Кларк 🐶 Глава 1: Нестандартная вариативность 🌞«Тёмная сторона шрифта» — суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🌞Вариативные гротески: Pragmatica Next Circe Contrast 🐶 Глава 2: Оптические размеры Шрифт наполовину состоит из оптических иллюзий 🌞Шрифты с оптическими размерами: Bodoni PT Simon Kudry (с бесплатным начертанием Kudry Weird Headline Stapel Stem PT Sans (бесплатный) PT Serif (бесплатный) 🌞Волшебные слова: Caption — до 12 пт Text — 12-18 Subhead — 18-48 Headline — 48-72 Display — 60+ Poster — 96+ 🐶 Глава 3: Шрифт переодевается 🌞Деликатный геометрический гротеск с большим набором стилистических сетов: Hint Включить сет Grotesque Round в CSS: font-feature-settings: "ss03"; 🌞Статья о Хинте и его стилистических сетах 🐶 Глава 4: внимание к деталям 🌞Шрифт с пропорциональными и моноширинными маюскульными и минускульными цифрами: Bodoni PT Как включить поднятие регистрозависимой пунктуации на all caps в CSS: font-feature-settings: "case"; 🌞Статья о том, как включать стилистические сеты в Фигме и CSS 🐶 Глава 5: странные вещи, которые может шрифт 🌞Шрифт Mojito, который может имитировать почерк и содержит ~1400 знаков 🌞#player">Первая в мире видеоигра в шрифте 🐶 Глава 6: Микротипограф — «что-нибудь полезное» 🌞Микротипограф в шрифте — что это такое и как он работает 🌞Плагин-типограф для Фигмы 🌞Типограф студии Лебедева 🐶 Глава 7: шрифт и нейросети 🌞В шрифт встроили нейросеть 🐶 И на всякий эсэмэмщица напоминает: 🌞«Как разобраться в кириллице» — статья 🌞«Как разобраться в кириллице» — бесплатный курс 🌞Используйте ТЕСТОВЫЕ ВЕРСИИ Главный хайлайт встречи — Саша разрешила произносить Circe как Цирце 👀 Пересматривайте, перечитывайте, пробуйте. А мы всегда на связи: тут в канале или по почте fonts@paratype.com P.S. В комментариях ещё опубликуем несколько фотографий с митапа

Тема: Глобальная проблема переработки пластиковых отходов. То есть задача — буквально сделать интерактивный арт-проект из бутылок. Его делают Николай (@nick_kudrya) и Наташа (@natalydesign) под моим чутким контролем и с персональными фидбэками. Попросил их рассказать о проекте, сейчас они на этапе концепта. Ребята еще поделились подробнее текстом о процессе и себе: Пару слов о нас. Я — Николай, человек, который решил уйти в дизайн после того, как ему исполнилось 33 года. До этого занимался спортивным маркетингом, пробовал себя в стартапах, где, не имея особых знаний в дизайне, отрисовал свой первый интерфейс приложения. В процессе обучения и перехода в индустрию дизайна мне удалось продать себя как арт-директора в одной из дизайн-студий в Ташкенте, где я, по сути, набирался опыта и набивал шишки. После ухода из этой студии мы вместе с коллегой открыли собственную дизайн-студию, которая функционирует уже чуть больше двух лет. Мой соавтор проекта на курсе "Ultra UI: Уровень Арт-дирекшн" — Наталья. Более 10 лет она работала художником, а сейчас — Lead UI/UX-дизайнер с опытом более 8 лет в digital. Художественный бэкграунд помогает ей создавать сильные визуальные концепции, работать с идентичностью проектов и выстраивать эстетику, а опыт в digital — проектировать продуманный UX и управлять дизайн-процессами. Вот такую небольшую команду собрал Евгений в рамках курса. Все рассказывают истории успеха, а я, пожалуй, кратко расскажу о тех вызовах, с которыми нам пришлось столкнуться: 1. Работа в команде Она сильно отличается от индивидуальной. Это всегда поиск общего решения, которое подойдет обоим, ведь проект учебный. Например, список тем, одинаково интересных нам обоим, заметно меньше. По сути, это очень похоже на работу с реальным проектом, где тему выбирает клиент. 2. Постоянная связь Практически каждый день мы стараемся созваниваться, несмотря на текущие рабочие задачи. Каждый созвон занимает от 20 до 60 минут. Нам повезло: мы живём в одном часовом поясе и можем найти время для общения практически в любое время суток. 3. Выбор темы Женя предупреждал, что в какой-то момент мы можем захотеть остановиться и начать всё заново — так и случилось. Изначально мы выбрали, как нам казалось, очень классную тему — студию традиционных ремёсел Японии. Мы прошли большой путь: анализ, референсы, мудборды, сторителлинг, раскадровку, интеграцию текста, даже начали генерировать материалы — но в итоге остановились и сменили направление. 4. Понимание механик Важный момент, который донёс Женя и к которому мы пришли далеко не сразу. Даже в фестивальных сайтах работает принцип «делай проще». Конечно, на Awwwards полно кейсов с невероятными 3D-моделями, сложными переходами и очень креативными решениями. Но лучший способ двигаться в любом деле — идти последовательно. Вооружившись этими вводными и спотыкаясь о хотелки вроде «надо сгенерировать видеосеквенцию» или «может, сделать простенькое 3D», мы в итоге пришли к простой CSS-анимации. Ну и если кто-то дочитал до конца — ловите наши соцсети. К сожалению, ни у меня, ни у Натальи нет собственных Telegram-каналов. «Запретграм» у нас больше про жизнь, чем про работу, поэтому делимся рабочими инструментами. ● Николай: Behance / Linkedin ● Наталья: Behance / Linkedin

Дима Бороухин @dmboro — в прошлом дизайнер и веб-разработчик. После потери зрения объединил свои технические знания с личным опытом и стал консультантом по цифровой доступности. — Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры — как это работает на практике? Я пробовал ChatGPT, однако по удобству взаимодействия мне больше понравился Gemini. Его интерфейс вполне доступен: элементы управления имеют корректные роли, имена и состояния, что позволяет скринридеру считывать структуру страницы. В своей работе я активно применяю AI для подготовки HTML-страниц для презентаций — чтобы показывать командам типичные проблемы доступности. Грамотный промпт позволяет сгенерировать страницу, где один элемент оформлен эталонным кодом, а остальные имеют аналогичный дизайн, но содержат критические ошибки — например, невозможность установить фокус. Визуально всё выглядит одинаково, но при взаимодействии через клавиатуру или скринридер различия становятся очевидными. Также я использую AI для подбора цветовых схем и помощи в написании CSS-кода. — Ты знаешь кейсы, где AI улучшил доступность продукта? или хотя бы часть? Комплексных кейсов, где AI улучшил доступность продукта, в моей практике не встречалось. Вижу нейросети лишь в точечных задачах — как в примере с описанием изображений, о котором расскажу дальше. — Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограниченными по здоровью? Риск, безусловно, есть. AI может отлично знать теорию и стандарты, но их всегда нужно проверять на практике. Реальные сценарии взаимодействия со вспомогательными технологиями часто сложнее, чем их описывают в документации. Пример из жизни: недавно я просил AI создать примеры недоступных кнопок. Модель предположила, что «поломанная» кнопка будет полностью неработоспособна для скринридера. Однако на практике скринридер NVDA умеет эмулировать нажатие даже там, где код реагирует только на клик мыши. В итоге для пользователя скринридера кнопка может сработать, а для человека, использующего только клавиатуру, она останется недоступной. Я не разработчик нейросетей, но как консультант по цифровой доступности могу сказать: чтобы ситуация изменилась, в данные для обучения моделей нужно включать больше примеров реального поведения ассистивных технологий. Важно, чтобы AI видел не только идеальный код, но и понимал нюансы взаимодействия разных групп пользователей с интерфейсом. — 70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности? Теоретически — может, но на практике всё зависит от того, как сформулирован запрос. Если создатель продукта не осведомлен о принципах доступности, он просто не включит эти требования в задачу для AI. А без явного запроса модель проигнорирует эти нюансы ради скорости разработки. Важно помнить: доступность — это не только формальное соответствие ГОСТу или WCAG. Прежде всего это про пользовательский опыт. Можно создать приложение, которое формально пройдет все автоматизированные тесты, но при реальном использовании окажется неудобным. — В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками? Это уже реальность. Я постоянно пользуюсь отечественными решениями. Например, «Умная камера» Яндекса — незаменимая вещь в быту: она помогает отличить бутылку молока от кефира в холодильнике, когда упаковки идентичны. Недавно я показывал зарубежным коллегам функцию описания изображений в Яндекс Браузере. В одном онлайн-магазине одежды вместо внятных alt-текстов были маркетинговые названия коллекций. Нейросеть Яндекса точно описала суть: состав комплекта, цвета, фасон. Это тот случай, когда AI исправляет ошибки контента «на лету». Так что — большой респект и спасибо команде инклюзии Яндекса за их работу!

cssauthor

Шрифт первого месяца — Onweer CSTM Fonts, а тема — буря. Плакаты могут быть на любом языке из тех, которые поддерживает шрифт

Якуб Крехель показал набор мелких приёмов, которые по отдельности почти незаметны, но в сумме сильно меняют ощущение от интерфейса. Он прошёлся по типографике, радиусам скруглений, анимациям и другим визуальным деталям, а главное — показал, как именно их улучшить на практике, с конкретными CSS-свойствами и примерами. #статья@zhurnalus_lite

Install ️Figma Дизайн

Теперь в Потоки можно загрузить посты в формате CSV. Это пригодится, например, если вы хотите выгрузить посты из сторонней CMS и добавить их на Тильду. Также посты теперь можно экспортировать и добавлять Потоки в другие проекты на Тильде. Подробная инструкция в Справочном центре: https://help-ru.tilda.cc/feeds#import-export Где найти: Перейдите в нужный Поток 👉 наведите на три точки 👉 нажмите на «Ещё» (Если в проекте больше одного Потока) #tildaupdates

А пока делимся с вами важными ссылками с субботней лекции Саши на UX/UI Conf о шрифтах в вебе. В подборке есть и книги, и записи других лекций, и статьи. Надеемся, каждый найдёт для себя что-то интересное. ⚡️ Пара мыслей с лекции, которые могут выручить вас — Иногда шрифтовые дизайнеры добавляют прямо в название шрифта подсказку, в каких размерах его использовать — смотрите картинку к посту. — Если вы собираетесь использовать шрифт в мелком кегле, особенно на экране — межбуквенные расстояния должны быть достаточно просторными, в этом случае может помочь разрядка (положительный трекинг). — Если вы собираетесь использовать шрифт в крупном кегле, отрицательный трекинг допустим, но обязательно проверяйте его на сложных сочетаниях типа «ух», «кл», «гт» — не давайте буквам слипнуться! — Если вы хотите попробовать использовать на сайте новый для себя шрифт, обязательно посмотрите на прототип из Windows с самого старого монитора, какой найдёте, чтобы проверить экранное отображение. ⚡️ Шрифты, о которых спрашивали во время лекции (ими была сделана презентация): Роскошный Hint Эксцентричная Helsa У нас на сайте появились тестовые версии, не забывайте скачивать и примерять шрифты ⚡️ Бесплатные шрифты, которые участвовали в лекции 🐶 Текстовые: Commissioner Geologica Golos Text Golos UI IBM Plex Sans Onest PT Root UI Tilda Sans 🐶 Не совсем текстовые Lanze Martian Grotesk 🐶 Совсем не текстовые Ambidexter Kudry Weird Headline ⚡️ Статьи, курсы, инструкции и коды: 🔸Большая подборка шрифтов без бюджета с приличной кириллицей  🔸«Как разобраться в кириллице» — статья 🔸«Как разобраться в кириллице» — бесплатный курс 🔸Статья ABCDinamo о встраивании вариативных шрифтов на сайт (на английском) ⚡️ Примеры кода для вариативных шрифтов с codepen.io 🔸Изменение жирности по ховеру 🔸Анимация изменения формы независимо от курсора 🔸Анимация изменения ширины независимо от курсора 🔸Изменение жирности в той части надписи, где курсор 🔸Изменение ширины и жирности в той части надписи, где курсор ⚡️ Ещё немного полезного: 🔸Статья о микротипографе, который мы встроили в шрифт 🔸Статья о том, как включить возможности OpenType в CSS и Фигме 🔸«Тёмная сторона шрифта» суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🔸Статья о том, как бесплатно попробовать шрифты 🔸Статья о многоязычных шрифтах 🔸Большая статья о шрифтовых лицензиях ⚡️ Приложения: Фонтоскоп — бесплатное приложения для теста почти всей библиотеки Паратайп в Ai, Ps, Id, Figma Инструкция по установке ⚡️ Книги (их не было на лекции, но они будут полезны): 🔸Живая типографика, Александра Королькова 🔸 Облик книги, Ян Чихольд 🔸Новая типографика. Руководство для современного дизайнера, Ян Чихольд 🔸Основы стиля в типографике, Роберт Брингхерст 🔸Мой путь к типографике, Вольфганг Вайнгарт 🔸Типографика. Порядок и хаос, Владимир Лаптев ⚡️ Лекции: 🔸Вся правда о шрифтовых парах 🔸Шрифтовая магия Буквы не то, чем кажутся

🔶 Httpster — примеры сайтов и интерфейсов, где можно найти нестандартные решения для UX и UI 🔶 CSS Design Awards — проекты, отмеченные премией как самые красивые и оригинальные 🔶 Brutalist Websites, если нужен брутализм 🔶 Dribbble — сообщество графических дизайнеров, веб-дизайнеров, иллюстраторов и 3D-визуализаторов 🔶 Minimal Gallery — библиотека сайтов в минималистическом стиле 🔶 One page love — подборка одностраничных сайтов и шаблонов 🔶 Lapa Ninja — тысячи примеров сайтов, а также бесплатные ресурсы для работы 🔶 HUDS+GUIS — здесь можно изучать интерактивный дизайн 🔶 FWA (Favourite Website Awards) — площадка премии, которая отмечает классные работы в области цифрового дизайна и инноваций в дизайне 🔶 Dark Mode Design — царство тёмного режима 🔶 Site see — галерея сайтов с удобной фильтрацией контента по цвету и направлению [Фабрика Дизайна]

После релиза кабинета рекрутера 2 февраля я почти не вылезал из кода. Основной фокус был не на «добавить кнопки», а на то, чтобы всё это держало нагрузку, не сыпалось и работало быстро. Коротко: докрутил рекрутерскую часть, сильно ужал расходы на инфраструктуру и снизил количество лишних запросов в Redis (примерно х10 раз), что сэкономит мне денег за месяц. 🔘 Что сделал: – Стабилизировал кабинет рекрутера: поправил гонки в БД, доработал логику откликов/чатов, метки прочитанного, статусы, ограничения и защиту API; – Причесал страницы рекрутера: список вакансий и детальная стали удобнее, добавил CTR, копирование ссылки, slug-ссылки, адаптив и кучу мелких UX-фиксов; – Сильно переработал кеши: Redis + request-scoped кеши + negative cache + gzip для данных поиска/вакансий, чтобы меньше долбить БД и API; – Снизил нагрузку на БД: батчинг аналитики и событий, буферизация через Redis, фоновые флаши и дневные агрегаты; – Подкрутил инфраструктуру: Gunicorn, CPU на проде, таймауты и health-check Redis; – Разнес монолитный главный файл на модульную структуру (bootstrap/blueprints), чтобы дальше не утонуть в хаосе; – Обновил стратегию кеширования фронта; – Добавил PWA-базу (иконки/manifest/service worker + offline fallback). Теперь можно добавить сайт на домашний экран и пользоваться как приложением; – Доработал проверку резюме и PDF: асинхронная генерация, кеш, улучшения по мобильному UI. Ну и теперь проверка резюме даёт более подробную информацию чуток) – Разбил большой css файл на 24 маленьких и ничего не сломал)) – Поработал чуть по SEO и вывел в поиск 1000+ страниц по разным параметрам, посмотрим, какой эффект это даст. 👀 Что по цифрам: – Были рекордные показы по SEO из гугла и яндекса, а также клики (всё это за 0 рублей); – Рекорд по выручке за последние 30 дней; – DAU приближается к 4к пользователей (шок). Цель 10к DAU; – Каждый день 200+ регистраций. – Сотни сопроводительных и проверок CV каждый день; – 200+ откликов добавляют в менеджер откликов ежедневно; За последний месяц, чтобы вы понимали рост, я до сих пор не осознаю пока: – Сопроводов сгенерировано на 138% больше, чем за прошлый период; – Сиви проверено на 103% больше; – Мэтчей на 133%; – Поисковые запросы на сайте на 58%; – Откликов добалвено на 103% больше; – Рост регистраций на 117%; 🌐 Из важного ещё Я научился хорошо парсить Linkedin (его не просто парсить, ибо у них закрытое апи и в целом хреновый поиск), поэтому теперь вакансий с прямым контактом будет ещё больше. Ну и расширяю сетку рекрутеров тоже. И я почти полностью ушёл от HH. Теперь их вакансий на сайте меньше 5% и только по дизайну (редко). В скором времени откажусь ещё от пары агрегаторов, чтобы давать только прямые контакты. Пришлось немного улучшить машинку, которая тянет всё это дело, ибо старая стала подтупливать) Теперь всё гуд. Сейчас цель простая: продолжать усиливать рекрутерский контур и доводить путь вакансия → отклик → чат → оффер до максимально бесшовного состояния. Весь упор сейчас буду делать на рекрутеров, чтобы привлекать их в сервис. Пока не знаю как, если есть идеи — пишите. Спасибо каждому, кто пишет фидбек в личку. Это реально помогает делать продукт лучше каждый день. А его я получаю ежедневно с массой благодарности. Спасибо!!! Если у вас есть вопросы, пожелания, предложения, приходите в лс ➡️ Смотреть вакансии ➡️ Смотреть вакансии ➡️ Смотреть вакансии ч.25

Вот что мы подготовили на этой неделе: • Цитаты из книги Кайла Чайки «В поисках минимализма. Стремление к меньшему в живописи, архитектуре и музыке» • Прогноз трендов от Pinterest на 2026 год • Обзор акцидентных шрифтов с кириллицей в Google Fonts. Вторая часть • Опенсорсная библиотека для создания «впуклых» углов на чистом CSS • Как правильно использовать информационные подсказки в интерфейсах • Простой способ начать работу с переменными в Figma • Как слоты в Figma упрощают работу с дизайн-системой и делают архитектуру чище • Как формировать культуру команды и сохранять идентичность. Советы пяти студий • Принципы подбора шрифтов. От технических параметров до эмоционального воздействия • Как писать промты для агентов при работе с кодом • 10 главных ИИ-трендов, которые повлияют на развитие технологий и IT-компании • Очень эстетичный набор карточек с советами для музыкантов

Сегодня пришло письмо от CssDesign Awards о том, что надо выбрать сайт года! Буду на выходных смотреть номинантов. Очень интересно самому, кто там оказался. А на следующей неделе буду готовить статью про номинантов.

Ребята, поддержите, пожалуйста, проект. Уже получили 6 наград «Сайт дня»: CSS Nectar, CSS Winner, Design Nominees, CSS Light, Best CSS, CSS Design Awards. Хотим получить еще награду на Awwwards. 🏆 Проголосовать на Awwwards ⚫️Посмотреть сайт P.S. Проект был выполнен студенткой Анастасией (@m0ri0n1) на моем персональном обучении «Ultra UI: Уровень Арт-дирекшн». На этом курсе мы глубоко изучаем создание промо-сайтов на уровне международных студий, а также много работаем с нейросетями, 3D и анимацией для проработки качественного визуала. Отдельно хочу поблагодарить команду Taptop и верстальщиков за реализацию проекта: @DmitryUnn, @PodoynitsynaYulia, @PGI78 и @NatalieMeribel

Делюсь с вами модификацией, которую я писала по просьбе коллег 🐱 Если вы используете на всем многостраничном сайте меню из zero-блока, то для вас этот код, который меняет внешний вид активного пункта меню: Несколько правил по использованию кода: ⭐️ Присвойте блоку(ам) с меню класс .uc-header ⭐️ Все пункты меню сделаны с помощью элемента кнопки (Button) ⭐️ В самом начале кода скорректируйте css-свойства под ваш дизайн активного пункта ⭐️ Если вы хотите, чтобы с активным пунктом можно было взаимодействовать, сотрите свойство pointer-events: none; ⭐️ Подключение библиотеки jQuery не требуется Для случая, когда вам может понадобиться задать разные стили для кнопок первого и второго уровня меню, я оставлю код в комментариях. Правила его использования те же, только поправить нужно будет два комплекта свойств. 💭 По всем вопросам модификации пишите в комментарии к посту. #тильда #модификации #меню

В конце прошлого года нас просто адски завалило проектами и я не публиковал дайджест Ноября. Работа, дедлайны, созвоны, правки. Но исправляюсь и возвращаюсь к нормальному ритму с декабрьским дайджестом. В декабре 2025 вышло реально много классных проектов. Это точно работы, на которые стоит посмотреть внимательно. В подборку попали и ребята из РФ, проект от Vide Infra и Артема Якушева. Очень разный, но одинаково сильный уровень. Я уже написал большую статью на сайте https://dsgners.ru/ancora/28137-dizayn-daydjest-css-design-awards-sayt-mesyatsa-dekabr-25">Dsgners 👉🏼 https://dsgners.ru/ancora/28137-dizayn-daydjest-css-design-awards-sayt-mesyatsa-dekabr-25 Разобрал 5 проектов, оставил ссылки, скриншоты и мои комментарии. Там же объяснил, почему не согласен с первым местом и как, на мой взгляд, иногда работает логика жюри на таких премиях. Это не истина в последней инстанции, а моя авторская оптика, с которой вы можете как согласиться, так и поспорить в комментах. Приятного просмотра и чтения. 🏆 Саша из Анкóры

Разработчик Амит Шин написал о проблеме, которую он встречает на каждом новом проекте. В коде разбросаны десятки определений одних и тех же анимаций: несколько fade-in, пара slide, несколько spin. Разработчики пишут их заново, не зная, что похожие уже есть где-то рядом. Главная ловушка в том, что keyframes всегда глобальны. Даже в компонентной архитектуре последнее определение с таким именем перезаписывает все предыдущие. Локально всё работает, а на продакшене анимации ломаются из-за порядка загрузки стилей. Решение: единый файл с переиспользуемыми keyframes, которые настраиваются через CSS-переменные. Внутри: – Почему keyframes дублируются в каждом проекте; – Как глобальная область видимости ломает анимации; – Динамические slide и zoom через CSS-переменные; – Комбинирование анимаций и animation-composition; – Поддержка prefers-reduced-motion из коробки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Капитан Червь Мы сложили механику appleworm.io и сеттинг CS, и получили игру для BetBoom. Внутри несколько разных карт, Червь контр-террорист и 15 попыток успешно задифузить бомбу. Играть: https://sirena.sports.ru/captain-cherv/ 💜 креативная студия Сирена