Будни разработчика

#статья дня

Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.

Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.

Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.

TL;DR

Google Translate в Chrome при переводе страницы подменяет текстовые узлы (TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность.

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

Правда, финские программисты даже и пытаться не будут...

#translate

❤7🫡3👍2

www.tgoop.com/htmlshit/3884

1.96K viewsSergey Bekharsky, Nov 5 at 08:36

#статья дня

Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.

Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.

Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.

TL;DR

Google Translate в Chrome при переводе страницы подменяет текстовые узлы (TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность.

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

Правда, финские программисты даже и пытаться не будут...

#translate

BY Будни разработчика