🎨 Figma — В С Ë

С 1-го февраля киллер-фича Dev Mode выходит из открытой беты.

Теперь доступ к существующему функционалу для разработчиков можно получить, если оплатить план Professional за 12$ в месяц…

Если у вас в команде план Organization или Enterprise, то за каждое «место разработчика» нужно заплатить 25 и 35 долларов в месяц соответственно.

Dev Mode позволяет быстро просматривать отступы между элементами, генерировать готовые CSS-стили, которые требуется просто вставить. Это ускоряет процесс вёрстки.

До Dev Mode была отдельная вкладка, позволяющая быстро просматривать свойства и CSS-стили, но её больше нет. Поэтому единственный способ код-генить CSS — ПКМ по слою → Copy/Paste as → Copy as code → CSS. А чтобы узнать отступы, нужно зажимать кнопку option.

За удобство надо платить 🤑

🎨 Дев-моду быть!

Рассказываю как активировать Figma Professional на 2 года бесплатно.

Фигма бесплатно предоставляет в рамках программы Figma for Education подписку, которая соответствует всему функционалу Figma Professional.

Кому это подойдёт? Потому что подойдёт не всем:

💻 Вы являетесь инди-разработчиком: сами разрабатываете дизайн и верстаете его через Dev Mode.

🎨 Вы самостоятельно изучаете дизайн. Хотите использовать весь функционал Фигмы.

Активировать подписку могут студенты и не только (лазейки, привет):

1. Меняем страну на США через VPN.

2. Переходим на страницу 🎨 Figma for Education.

3. Нажимаем на кнопку Get verified.

4. Отвечаем на вопросы:

— Are you a student, educator, or administrator? — Student.

— What type of institution do you attend or work for? — Higher Ed.

— Why are you applying for a free Figma Education plan? — Пишете что хотите, например: Because I study design and my career is centered around UX/UI design.

— What is your school's name? — Delhi College of Engineering (DCE)

— What is your primary field of study? — Graphic / Visual Design.

— Please upload a copy of your class schedule — Откройте сообщение, скопируйте файл и вставьте как копию вашего расписания занятий.

— Expected graduation date — Укажите August, дату окончания укажите через 2 года (на момент написания поста — 2026).

5. Согласитесь со всеми правилами и вы счастливый обладатель всех фичей Figma Professional, в том числе дев-мод.

👩‍💻 👩‍💻 👩‍💻 👩‍💻 Интернет станет лучше благодаря Interop 2024

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

В этом году браузеры будут работать над следующим:

— Доступность. Было создано больше тысячи автоматических тестов, направленные на улучшение доступности.

— CSS Nesting. Помогает повысить модульность стилей, уменьшает размер CSS. Браузеры уже её поддерживают, осталось допилить корнер-кейсы.

— Custom Properties. Разработка правила @property, позволяет определить кастом-свойство, включая типизацию.

— Declarative Shadow DOM. Компоненты, слегка схожие на логику React-компонентов.

— font-size-adjust. Свойство позволяет изменять размер строчных букв относительно прописных.

— HTTPS URLs for WebSocket. Изначально WS требовал указания ws и wss, что не позволяло использовать относительные URL без костылей.

— IndexedDB. Постоянное хранение данных в браузере для оффлайн-работы.

— Layout. Будут дорабатывать совместимость flexbox, grid, и subgrid.

— Pointer and Mouse Events.

— Popover. API предоставляет разработчикам гибкий механизм для отображения всплывающего контента поверх другого.

— Relative Color Syntax. Задать цвет относительно другого цвета, используя from и calc() для любого из значений цвета.

— requestVideoFrameCallback. Позволяет эффективно выполнять операции с видео по каждому кадру.

— Scrollbar Styling. Скроллбар сейчас можно стилизовать, но неприятно.

— @starting-style и transition-behavior.

— Text Directionality. Импрув стилизации сайтов, которые адаптируются под текст, читаемый справа-налево.

— text-wrap: balance. Помогает сбалансировать текст, чтобы не было одиночных слов в заголовках и так далее. Сейчас работает в браузерах по разному.

— URL. Исправление проблем совместимости при парсинге ссылок.

На картинке показаны текущие результаты пройденных тестов браузеров.

🫡 Больше не XD

Adobe прекратит развитие 🎨 Adobe XD, неспособный конкурировать с 🎨 Figma. Это решение произошло после известия, что компания не сможет приобрести Figma за $20 млрд из-за давления антимонопольных служб.

Когда Adobe рассматривала возможность приобретения Фигмы, компания перевела XD в режим обслуживания, прекратив выпуск новых функций для продукта.

Adobe сосредоточится на развитии 🎨 Photoshop, 🎨 Premiere Pro и AI-функционала. Почините уже Премьер, пожалуйста 🥺

Им больше не смешно…

😺 1 кошка, 2 кошки, 5 кошек

Каждый разработчик рано или поздно сталкивается с проблемой: дизайнер вставил количественное числительное с существительным. Некоторые забивают и получается что-то в духе «1 кошки» или «5 кошка». С одним из решений задач мы познакомимся сегодня.

Часто используется i18next в проектах, но разработчики и не подозревают, что у библиотеки есть встроенная плюрализация на все языки:

{
  "cat_one": "{{count}} кошка",
  "cat_few": "{{count}} кошки",
  "cat_many": "{{count}} кошек"
}

Где cat — ключ перевода, а то что идёт после него — это плюральный суффикс. В ключ cat_one нужно подставить значение, где будет подставляться count и существительное, которое используется, будто бы общее количество является единицей (в нашем случае — 1 кошка). В cat_few и cat_many общее количество будет 2 и 5 соответственно. Прямо как в заголовке этого поста.

i18next.t("cat", {count: 0}); // -> "0 кошек"
i18next.t("cat", {count: 11}); // -> "1 кошка"
i18next.t("cat", {count: 32}); // -> "32 кошки"
i18next.t("cat", {count: 45}); // -> "45 кошек"

Переменную count в ключах можно опустить. В таком случае выводится будет следующее:

i18next.t("cat", {count: 0}); // -> "кошек"
i18next.t("cat", {count: 11}); // -> "кошек"
i18next.t("cat", {count: 32}); // -> "кошки"
i18next.t("cat", {count: 45}); // -> "кошек"

Значение count, которое мы передаём в объекте, нужно лишь для правильного склонения. И при необходимости мы можем его либо выводить, либо не выводить.

В английском языке всего два склонения. Поэтому в нём плюрализация следующая:

{
  "cat_one": "cat",
  "cat_other": "cats"
}

Какие плюральные суффиксы нужно использовать в зависимости от языка можно узнать в песочнице.

i18next.t("cat", {count: 1}); // -> "cat"
i18next.t("cat", {count: 10}); // -> "cats"

😎 Позже мы рассмотрим плюрализацию, если на проекте не используется i18next и подключать его только ради плюрализации не хочется.