Secret Code

⚰️ Постучали со дна Разработчики jQuery обновили JS библиотеку (на которой работает до сих пор полинтернета) до бета-версии 4.0. Что нового? — Убрали поддержку Internet Explorer < 11. Это уменьшило вес библиотеки. — Убрали устаревший API, который теперь поддерживается браузерами. Также уменьшило вес библиотеки. — Изменили порядок событий согласно спецификации W3C. — Миграция на ES-модули. Разработчики также исправили баги и ожидают минимальных сбоев.

React привлекает много разработчиков своей гибкостью и активным сообществом. Однако, одним только React нельзя ограничиться. Важную роль играют React-библиотеки и инструменты, расширяющие его возможности и упрощающие разработку. Всё это создает экосистему вокруг React. Рассмотрим библиотеки, позволяющие создавать веб-приложения на React. Сборщик и среда разработки Для запуска React-эппки нужен сервер. Эти инструменты создают сервер, который обновляет приложение при изменении файлов. Я рекомендую Vite. Он позволяет собирать приложение в статичные файлы, которые скачиваются пользователем. В конечном итоге пользователь видит готовое приложение. Разработчики React рекомендуют Next.js. Он используют серверный рендеринг, который сложнее клиентского. Проще говоря, это означает, что странички собираются на сервере и уже готовые отправляются пользователю. Роутер Лучше всего React Router. У Next.js свой роутер, поэтому если выбрали его, то выбирать роутер не нужно. Стейт-менеджер Полезно воспользоваться всеми и понимать как они работают. В разных компаниях используют разные менеджеры состояний. — Redux Toolkit — Recoil — Zustand — MobX Мне нравится Recoil (использую в пет-проектах), на моём месте работы использовался MobX. Асинхронный стейт-менеджер TanStack Query v5. Отгородит от спагетти-кода. Даёт возможность получать состояние запроса (загрузка, успех, ошибка), создавать бесконечные списки, делать оптимистичные обновления. Также все данные кэшируются и могут переиспользоваться. Если правильно использовать асинхронный стейт-менеджер, то потребность использовать обычный стейт-менеджер значительно снизится. Стилизация — CSS modules (использование .css файлов с суффиксом module — button.module.css) — Tailwind — Styled Components (CSS in JS) Формы — React Hook Form (удобная работа с формами, вывод ошибок с заполнением форм и не только) — React Select (кастомизируемый инпут с выпадающим списком с поддержкой доступности) Локализация react-i18next Анимации Преимущественно анимируем элементы с помощью CSS. Если анимации слишком сложные и не поддаются CSS, то реализуем с помощью библиотек. — Framer Motion Достаточно использовать по одной библиотеки из каждой категории, но никто не запрещает использовать несколько. Стоит понимать, что код будет тяжелый в поддержке, зависимым от ещё большего количества библиотек. Вес приложения увеличится и это плохо скажется на пользователях с плохим интернетом. Этот пост будет дополняться и изменяться в соответствии с изменениями в экосистеме React, потому что веб не стоит на месте.

Чей код? признавайтесь u/atoponce — #meme

Если ИИ не может захватить человечество, то тогда что это? u/Overall-Pie-7852 — #meme

😺 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 и подключать его только ради плюрализации не хочется.

🫡 Больше не XD Adobe прекратит развитие 🎨 Adobe XD, неспособный конкурировать с 🎨 Figma. Это решение произошло после известия, что компания не сможет приобрести Figma за $20 млрд из-за давления антимонопольных служб. Когда Adobe рассматривала возможность приобретения Фигмы, компания перевела XD в режим обслуживания, прекратив выпуск новых функций для продукта. Adobe сосредоточится на развитии 🎨 Photoshop, 🎨 Premiere Pro и AI-функционала. Почините уже Премьер, пожалуйста 🥺 Им больше не смешно…

👩‍💻 👩‍💻 👩‍💻 👩‍💻 Интернет станет лучше благодаря 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. Исправление проблем совместимости при парсинге ссылок. На картинке показаны текущие результаты пройденных тестов браузеров.

🎨 Дев-моду быть! Рассказываю как активировать 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, в том числе дев-мод.

🎨 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. За удобство надо платить 🤑

Привет!