Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В данной статье мы будем рассматривать решение небольшой задачи: как сделать максимально возможный размер шрифта динамического текста в его родительском контейнере. Или же, как впихнуть невпихуемое.
Рубрика «react.js» - 2
Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера
2022-06-18 в 10:50, admin, рубрики: css, font, html, javascript, markdown, markup, react.js, ReactJS, responsive, дизайнСоздаем свой React с рендером и useState за 30 минут
2022-02-19 в 11:44, admin, рубрики: createelement, javascript, jsx, parcel, React, react-dom, react.js, ReactJS, render, tsx, TypeScript, usestate
Понимание работы процессов приходит с изучением механизмов, которые приводят в движение мелкие части большого пазла. Если представить, что Вам дали задачу объяснить, что такое React за полчаса, скорее всего, Вы бы выбрали один из двух вариантов:
-
пересказать все то, что изложено на первой странице официальной документации reactjs.org
Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации
2020-12-25 в 14:24, admin, рубрики: canvas, javascript, lifestyle, movies, optimization, PIXI, pixi.js, React, react.js, ReactJS, tinkoff, Блог компании Tinkoff, Клиентская оптимизацияВ богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия - в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.
Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.
Читать полностью »
Повышаем квалификацию с лучшими инструментами для web-разработки на React
2020-07-14 в 12:14, admin, рубрики: java, javascript, React, react.js, ReactJS, Блог компании VDSina.ru — хостинг серверов, Программирование, Разработка веб-сайтовВы можете стать более ценным специалистом, изучив лучшие инструменты для разработки веб-приложений на React.
Большинство резюме работодатель отклоняет, просто пробежав их по диагонали. Это немного обескураживает, правда? Так что очень важно, чтобы он сразу увидел нужные ему знания и навыки у вас. Сейчас подходящее время прокачаться, особенно если вам нечем похвастаться в своём резюме. Не нужно посещать университет, чтобы получить новые навыки: нужно просто идти в нужном направлении и не отклоняться от него.
Читать полностью »
10 принципов масштабируемых фронтенд-проектов
2020-04-09 в 16:10, admin, рубрики: javascript, javascript framework, raiffeisendgtl, react.js, ReactJS, vuejs, Блог компании Райффайзенбанк, Разработка веб-сайтовС момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.
В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.
Читать полностью »
Масштабирование Redux-приложения с помощью ducks
2020-03-18 в 9:39, admin, рубрики: javascript, react.js, ReactJS, Блог компании OTUS. Онлайн-образование, ПрограммированиеВ преддверии старта курса «React.js разработчик» подготовили перевод полезного материала.
Как масштабируется front-end вашего приложения? Как сделать так, чтобы ваш код можно было поддерживать полгода спустя?
В 2015 году Redux штурмом взял мир front-end разработки и зарекомендовал себя как стандарт выйдя за рамки React.
В компании, в которой я работаю, недавно закончился рефакторинг большой кодовой базы на React, где мы внедрили redux вместо reflux.
Нам пришлось пойти на этот шаг, потому что движение вперед оказалось невозможным без хорошо структурированного приложения и четкого набора правил.
Кодовой базе уже больше двух лет и reflux был в ней с самого начала. Нам пришлось менять код, сильно завязанный на компонентах React, который никто не трогал больше года.
Опираясь опыт от проделанной работы, я создал этот репозиторий, который поможет объяснить наш подход к организации кода на redux.Читать полностью »
Обработка изображений ReactJS — NodeJS
2020-03-08 в 13:09, admin, рубрики: arraybuffer, ASCII, express.js, filereader, hex, javascript, node.js, nodejs, react.js, ReactJS, uint8Array, Unicode, двоичная система счисленияДоброго времени суток.
Разбор полетов провожу на Reactjs (сторона клиента) и Nodejs (сторона сервера).
Недавно в моем маленьком проекте встал вопрос, как легко и просто можно обмениваться изображениями по типу клиент — сервер.
Сегодня мы научимся отправлять бинарные данные (конкретно изображения ) со стороны клиента и обрабатывать их на сервере. Добро пожаловать в под кат.
Читать полностью »
Новый фронтенд Одноклассников: запуск React в Java. Часть II
2020-02-11 в 12:11, admin, рубрики: graalvm, java, javascript, ok.ru, React, react.js, ReactJS, Блог компании Одноклассники, одноклассники, ок.tech, Разработка веб-сайтов
Мы продолжаем рассказ о том, как внутри Одноклассников с помощью GraalVM нам удалось подружить Java и JavaScript и начать миграцию в огромной системе с большим количеством legacy-кода.
Во второй части статьи мы подробно расскажем о запуске, сборке и интеграции приложений на новом стеке, погрузимся в специфику их работы как на клиенте, так и на сервере, а так же обсудим, возникшие на нашем пути, трудности и опишем решения, помогающие их преодолеть.
Если вы не читали первую часть, то очень рекомендую это сделать. Из неё вы узнаете об истории фронтенда в Одноклассниках и познакомитесь с его историческими особенностями, пройдете путь поиска решения проблем, которые накопились у нас за 11 лет существования проекта, а в самом конце окунетесь в технические особенности серверной реализации принятого нами решения.
Читать полностью »
Универсальный роутинг для React приложений
2020-01-19 в 0:23, admin, рубрики: javascript, react.js, ReactJS, Разработка веб-сайтовЕсли попытаться в двух словах описать, в чем заключается функция роутинга на фронтэнде веб-приложений, то можно придти к выводу, что каждый популярный фреймоворк совершенно по-разному представляет это себе. Даже, сравнивая версии одного и того же фреймоворка, можно придти к выводу, что функции и API роутинга наиболее подвержены изменениям (часто без обратной совместимости). Например 4-я версия роутинга в React была переработана настолько радикально, что некоторые популярные проекты на githab.com так и не перешли на эту версию.
За всем этим просматривается общая тенденция, которая, по моему мнению, заключается в том, что функционал роутинга в многих популярных фронтэнд фрейморках перегружен. В связи с этим, он становится жестко связанным с другими компонентами, которые могли быть выделены из роутинга (например с навигацией, историей, ссылками и т.п.). Поэтому, наверное, многим знакомо то чувство, когда использование роутинга становится неудобным, а его расширение просто невозможным. По сравнению с гибкими и расширяемыми компонентами, роутинг в популярных фронтэнд фрейморках выглядит на порядок менее удобным и совсем не расширяемым. Особенно это относится первым версиям (до 4-й) роутинга в React.
В этом сообщении я рассмотрю некоторые исторические моменты, которые привели к такому положению дел с роутингом, а также использование библиотеки universal-router, совместно с React.
Новый фронтенд Одноклассников: запуск React в Java. Часть I
2020-01-16 в 6:00, admin, рубрики: graalvm, java, javascript, ok.ru, React, react.js, ReactJS, Блог компании Одноклассники, одноклассники, ок.tech, Разработка веб-сайтов
Многие слышали название GraalVM, но опробовать эту технологию в продакшене пока довелось не всем. Для Однокласснииков эта технология уже стала «священным Граалем», меняющим фронтенд.
В этой статье я хочу рассказать о том, как нам удалось подружить Java и JavaScript, и начать миграцию в огромной системе с большим количеством legacy-кода, а так же как на этом пути помогает GraalVM.
Во время написания статьи оказалось, что весь объём материала не влезает в традиционный для ХАБРа размер и если выложить публикацию целиком, то на её прочтение уйдет несколько часов. Поэтому мы решили разделить статью на 2 части.
Из первой части вы узнаете об истории фронтенда в Одноклассниках и познакомитесь с его историческими особенностями, пройдете путь поиска решения проблем, которые накопились у нас за 11 лет существования проекта, а в самом конце окунетесь в технические особенности серверной реализации принятого нами решения.
Читать полностью »