ПРОДВИНУТАЯ РАБОТА С МУЛЬТИЯЗЫЧНОСТЬЮ В REACT | i18n

В данном видео мы поговорим о мультиязычности. Поделюсь советами из своего опыта. Также расскажу, почему я не использую готовые пакеты для i18n и поделюсь своим кастомным решением.

Ссылка на Телеграмм канал:

Код из видео:

Ссылка на пакет:

Таймкоды:
00:00-00:48 - Интро
00:48-03:33 - Что такое i18n?
03:33-06:20 - Смотрим на пример
06:20-09:54 - Работа с RTL интерфейсами
09:54-12:38 - Формат и нейминг ключей
12:38-16:57 - Расположение файлов с ключами
16:57-17:51 - Переводы дат и времени
17:51-22:22 - Форматирование переводов
22:22-28:00 - Почему я не использую готовые инструменты
28:00-35:51 - Смотрим полноценный пример
35:51-44:28 - Смотрим код моего решения
44:28-46:15 - Пару бонусных советов
46:15-46:37 - Заключение

[ayub_begimkulov]

Друзья, все таки решил выложить свое решение для i18n на npm, кажется, что есть люди, кому это может быть полезно.

Собственно, вот ссылка на GitHub:

И вот ссылка на npm:


Также дока пока совсем скудноватая, в ближайшие пару дней планирую улучшить. Должны еще доехать пару улучшений с точки зрения TS.

Накидайте звезд, если хотите, чтобы проект развивался.

[malsagov]

Очень крутое видео! Спасибо за контент Айюб!

[fdgpftk]

Очень информативное видео! Спасибо, что делишься своим глубочайшим пониманием технологий.

[demiurgen]

Видео - огонь! Очень полезно, спасибо

[Nuts_Cracker]

Спасибо! Очень своевременно вышло видео. Пишу свою первую мультиязычную апку на реакте. С i18-n разобрался, это не сложно. Однако практические рекомендации на основе опыта трудно переоценить!

[komilolimov]

Очень внятное объяснение, и все разобрал по этапно и очень красиво всё объяснил. Спасибо за такой контент мог бы сделать контент про next js и rtk . Спасибо заранее!

[SnegurkaBu]

Спасибо, очень познавательно. Было бы очень интересно посмотреть лайв-кодинг библиотеки, просто без монтажа, в формате стрима.

[aleksandrmisnov]

Классное видео ! Спасибо. Немного быстро для меня было, но думаю в пакете смогу сам разобраться с типизацией. Аюб, а сможешь сделать видео о том как правильно работать с NextJS и тайпскрипт? Было бы очень занятно посмотреть. И вообще, по next было бы полезно любой материал в твоём исполнение. Спасибо большое, очень рад что на тебя наткнулся.

[iomka]

Проблема кастомных решений - отсутствие поддержки из коробки автопереводов или хелперов заполняющий или создающих новые ключи. Например в vscode есть замечательное расширение lokalise.i18n-ally которое поддерживает большую часть решений из списка популярных. В целом наверное хотелось бы увидеть твоё кастомное решение как отдельный пакет учитывая насколько узкую задачу с маленьким размером кода оно выполняет и делает это судя по всему на отлично)

[wardi]

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

[AlexanderPozhidaev]

Спасибо за видео! 
Почему не использовали Intl.PluralRules вместо собственной реализации pluralize?

[dmitrysuhotskylessonjs]

Привет. Есть вопрос, какое оптимальное решение для локализации - если мы используем crud blog с хранением данных на бэке. Хранить все переводы в базе?

[dimetriss]

А есть/будет ли возможность асинхронно подгружать переводы для отдельных страниц, чтоб не тянуть переводы страниц на которые юзер потенциально не зайдет ему с языком сразу?
На сколько это вообще критично и необходимо и как такое реализовать?

[ReaktorGaming]

Тебе бы над изложением мысли поработать. Зачастую непонятно, что ты хочешь сказать. Например, на 17:00, про перевод времени. Я три раза переслушал, и так и не понял, что означает "они приходят из коробки", почему я не должен использовать moment, и что означает "информация не должна быть связана с вашим кодом". В чем вообще суть проблемы и в чем суть твоего решения?

[elena_sva]

Кажется это можно проще написать function pluralizeRu(count: number){
const rem = Math.abs(count) % 100
if (rem >= 11 && rem <= 19) {
return 'many'
}
switch (rem % 10) {
case 1:
return 'one'
case 2:
case 3:
case 4:
return 'few'
default:
return 'many'
}
}

[andreyh]

Спасибо, НО НЕ ТАРАТОРЬ!!! Люди, которые смотрят - только учатся и для них такая подача очень быстрая. А так за старание спасибо)