![[Перевод] Руководство по переводу React-приложений для i18n (альтернативы i18next и React-Intl)](https://habrastorage.org/getpro/habr/upload_files/313/c81/b0b/313c81b0bd1b198bac6232f25b87f822.png)
Интернационализация (или i18n) — это одна из тех функций, которые кажутся необязательными, пока они действительно не понадобятся. Как только вы захотите выйти за пределы одного языка или региона, внезапно вашему коду приходится поддерживать несколько локалей, текст с направлением справа налево и культурно-специфичные форматы. Если вы искали решения, то, скорее всего, уже встречали i18next или react-intl. Оба инструмента мощные, но у них есть свои недостатки: высокий порог входа,
Подробнее
Представь, что ты строишь крутой интерактивный сайт из деталек LEGO. React — это как раз такой продвинутый набор «умных» деталек для постройки сайтов. А эта книга — инструкция к нему. Читать далее
Подробнее
Всем привет. Я являюсь ведущим frontend-разработчиком компании 21Yard. Мы разрабатываем сервис для поиска строительных подрядчиков. На проект я пришел желторотым масленком, который мало смыслил в seo-продвижении продукта, но жизнь внесла свои коррективы, и сейчас я хочу рассказать, как я vike покорял. Придя на проект, я с энтузиазмом взялся за дело. На момент старта моей работы у нас уже существовал интернет-портал, написанный на php. К сожалению, он был написан на устаревшем фреймворке,…
Подробнее
Это вторая часть roadmap frontend разработчика, Если вы не читали первую часть, то настоятельно рекомендую ознакомится, Первая часть. В этой статье я продолжу вам рассказывать про мое представление современной карты развития frontend разработчика. Читать далее
Подробнее
Всем привет! Спешу сообщить о выходе новой версии замечательной фронтенд-библиотеки Symbiote.js! Никогда не слышали о ней? Самое время познакомиться. Symbiote - это компактная, но очень мощная библиотека для создания веб-компонентов и приложений на их основе. Да, я знаю, у нас уже есть React, Vue, Svelte, LitElement и прочее. И может быть, не очень понятно, зачем вникать во что-то еще… Но не торопитесь с выводами, Симбиоту есть, что вам предложить. Читать далее
Подробнее
Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс. В этой статье мы рассмотрим пример использования, основные функции и особенности данного решения. Читать далее
Подробнее
Content-Security-Policy (CSP) - это HTTP заголовок, который улучшает безопасность веб-приложений за счет запрета небезопасных действий, таких как загрузка и отправка данных на произвольные домены, использование eval, inline-скриптов и т.д. В этой статье будет сделан фокус на директиве style-src и ее использование вместе с CSS-in-JS библиотекой emotion. Читать далее
Подробнее
После подробного изучения темы скелетонов, я решил создать очень простое, гибкое, переиспользуемое, настраиваемое и легкое решение, которое подойдет для большинства случаев использования. В этой статье я опишу процесс создания этого решения и превращения его в библиотеку, а также трудности, с которыми я столкнулся при работе над ним. Читать далее
Подробнее
В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге. Читать далее
Подробнее
В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода Читать далее
Подробнее
Как, вроде бы, простая задача превратилась в головную боль. Читать далее
Подробнее
Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors. Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и
Подробнее