*🧑‍🎓 *LeetCode для фронтов

Отличный ресурс для подготовки к интервью на позицию фронта.
Есть вопросы по CSS, JS/TS, System Design.

➡️ Переходим по ссылочке и готовимся

Самое то на выходные 🤣

👩‍💻 Vim, vim, vim

Если кто-то откладывал изучение Vim, то пора начать... 😅

Вот прекрасный курс, который вам поможет » здесь

Кстати, попробуйте написать :smile в vim и вы получите улыбающееся лицо 😁

👨🏻‍🔬 Accessibility в Inspect Element в DevTools

Все мы часто используем Inspect Element, но замечали ли вы такой раздел как Accessibility? Я раньше на него не обращал внимание, но тут решил узнать: а зачем же он нужен? Так вот, давайте рассмотрим поля которые там содержатся:

✅ Contrast - значение контрастности текста и это оказывается проблема доступности №1 в Интернете. Есть даже специальная обучалка для этого, вот здесь. Рекомендуемый параметр 4.5. Еще есть классный сайт для проверки контраста цвета, ссылка тут.

✅ Name - это текст который проговорит экранный диктор.

✅ Role - ARIA роль текущего тега. Больше инфы здесь.

✅ Keyboard-focusable - можно ли сфокусироваться на элементе с помощью клавиатуры.

Все эти поля, как ни странно, отвечают за доступность вашего сайта. А что это такое? Все просто: это обеспечение возможности использования сайтов как можно большим числом людей, включая тех, чьи способности ограничены.

🤓 Еще в Lighthouse можно выбрать Accessibility и проверить свой сайт на наличие проблем.

✨ Хочу поделиться подборкой IT-каналов коллег из Сбера ✨

В ней есть каналы, связанные с разработкой, аналитикой, нашим любимым AI ? и даже лайфстайл-контентом.

Скорее добавляй себе и наслаждайся чтением ?

Telegram

Sber IT

Nastya Smelova invites you to add the folder “Sber IT”, which includes 21 chats.

? Интернализация приложения с i18next ?****

i18next - это фреймворк интернационализации приложения, написанный на JavaScript и для JavaScript. Использует подкапотом Intl API, который описан в посте выше.

Предоставляет такие стандартные функции как множественное число, контекст, интерполяция, форматирование. i18next можно использовать для веб-приложений, мобильных устройств и десктоп приложений (так у них написано на официальном сайте?).

*☑️ *Интерполяция

Интерполяция - одна из наиболее часто используемых функций в I18N. Она позволяет вставить динамические значения в наши переводы.

```
{
"key": "{{what}} is {{how}}"
}

i18next.t('key', { what: 'i18next', how: 'great' });
// -> "i18next is great"
```

*☑️ *Форматирование

Мы можем отформатировать значения (строковые и числовые), которые вставляем в нашу строку.

```
{
"intlNumber": "Some {{val, number}}",
"intlNumberWithOptions": "Some {{val, number(minimumFractionDigits: 2)}}"
}

i18next.t('intlNumber', { val: 1000 });
// --> Some 1,000

i18next.t('intlNumber', { val: 1000.1, minimumFractionDigits: 3 });
// --> Some 1,000.100

i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { minimumFractionDigits: 3 } } });
// --> Some 1,000.100

i18next.t('intlNumberWithOptions', { val: 2000 });
// --> Some 2,000.00

i18next.t('intlNumberWithOptions', { val: 2000, minimumFractionDigits: 3 });
// --> Some 2,000.000
```

*☑️*Множественное число

Помогает обрабатывать правила плюрализации для разных языков, что позволяет корректно изменять формы слов в зависимости от числа.

```
{
"key_one": "item",
"key_other": "items",
"keyWithCount_one": "{{count}} item",
"keyWithCount_other": "{{count}} items"
}

i18next.t('key', {count: 0}); // -> "items"
i18next.t('key', {count: 1}); // -> "item"
i18next.t('key', {count: 5}); // -> "items"
i18next.t('key', {count: 100}); // -> "items"
i18next.t('keyWithCount', {count: 0}); // -> "0 items"
i18next.t('keyWithCount', {count: 1}); // -> "1 item"
i18next.t('keyWithCount', {count: 5}); // -> "5 items"
i18next.t('keyWithCount', {count: 100}); // -> "100 item
```

*☑️ *Контекст

Контекст в i18next позволяет указать дополнительную информацию о том, где и как используется определенный перевод.

```
{
"friend": "A friend",
"friend_male": "A boyfriend",
"friend_female": "A girlfriend"
}

i18next.t('friend'); // -> "A friend"
i18next.t('friend', { context: 'male' }); // -> "A boyfriend"
i18next.t('friend', { context: 'female' }); // -> "A girlfriend"|>
```

? Доку можно посмотреть здесь

В следующем посте покажу, как мы можем оптимизировать наш код зная вот это все ?