Category: компоненты

21
Мар
2021

Подобрать изображение в зависимости от ширины элемента (компонента)

В html есть такой замечательный элемент, как picture, предоставляющий возможность грузить разные изображения в зависимости от медиа-запроса. И все бы хорошо, но проблема появляется при использовании компонентного подхода.
В своем проекте я…

31
Янв
2021

Стоит ли создать дополнительный компонент или можно оставить так?

На сайте есть 2 товара в виде карточки. Они идентичны лишь отличаются контентом.
У 1-ой карточки изображения приходят с сервера, а у 2-ой оно всегда статичное и + там текст.
Сейчас код компонента карточки с картинкой выглядит так:
const …

23
Янв
2021

Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с […]

14
Дек
2020

Убираем сдвиги в верстке наложением в CSS Grid

Перевод статьи Prevent layout shifts with CSS grid stacks с сайта www.hsablonniere.com для css-live.ru, автор — Юбер Саблоньер Люди используют CSS Grid по двум причинам: CSS — это потрясающе! Факт, как ни крути. Гриды — отличный инструмент для создания сложных двумерных макетов. У меня иногда бывает третья причина использовать CSS Grid: предотвратить сдвиги в верстке. […]

11
Дек
2020

При обновлении состояния в React получаю ошибку: Error: Maximum update depth exceeded

Почему у меня уходит в бесконечный цикл? Что я делаю не так?
Известны поля объекта, они не изменяются и идет сравнение именно по ним.
componentDidUpdate(prevProps) {
const { obj, arrHistory } = this.state;
if (!this.isEquals(obj, pre…

19
Ноя
2020

Spring создание компонентов

слышал что в спринге создание классов помеченных @Component через ключевое слово new является плохой практикой, но так и не смог найти объяснения, почему это плохая практика. Подскажите пожалуйста что почитать или объясните почему это плох…

18
Ноя
2020

Как динамически изменить state в react js?

У меня есть главный компонент App, в его state я передал массив объектов, а потом этот массив объектов передал через пропс в state второго компонента, где с помощью метода map я прошёлся по каждом элементы и отрисовал его. Каждый элемент …

16
Сен
2020

Как передать и использовать props для однофайловых компонентов?

Есть однофайловый компонент parkInfo.vue, я пытаюсь передать с main.js, где регистрируется этот компонент, входной параметр park.
main.js тут регистрирую компонент
Vue.component(
"popup",
require("./vue-components/p…

31
Авг
2020

Не меняются классы div-ов (Vue.js)

Изучаю Vue.js
В данных компонента – список булевых значений isOne, определяющих класс div-ов (2 класса – .one и .two, отличающихся цветом рамки), формируемых через v-for.
При клике на i-й div функция изменяет isOne[i], но класс при этом не…

29
Авг
2020

ReactJS вывести компоненты на страницу

Есть html страница, где будут выводится данные с сервера в определенных блоках.
Допустим блок профиль, где выводится логин пользователя. Каким образом это написать под reactJS? Целиком всю страницу разбить на компоненты или же только один …

09
Авг
2020

Перебор ассоциативного массива в ReactJS

Данный пример моего кода работает, но мне нужно получить не конкретный элемент массива, а все его элементы. Судя по всему необходимо использовать foreach внутри функции map, но у меня почему то так не работает. Также прилагаю структуру мас…

03
Авг
2020

Почему не отображаются изменения в UI компоненте игры 2048?

Моя версия игры 2048 на чистом js использует pub/sub шаблон проектирования. Один из моих компонентов должен отображать изменения в UI и он это делает, но другой, написанный приблизительно таким же образом – нет. В чем их различие?
(изменен…

13
Май
2020

Не работает метод compnentDidMount() внутри функциии класса компонента React.?

В родительском компоненте находиться функциия ajax() , которую я прокидываю в дочерний компонент и там вызываю. Но РЕАКТ выдает ошибку

“./src/components/signin/signin.js
Line 33:20: Parsing error: Unexpected token, expected “;”

12
Май
2020

nuxt как правильно обновлять данные передаваемые в компонент?

Есть компонент, модальное окно. При нажатии на кнопку открыть, переменная меняется на true, а при закрытии становится false (через v-if). Суть в том что в компонент, передаются данные, которые меняются при нажатии на разные кнопки, но в ко…

29
Апр
2020

Не происходит ререндер компонента при изменении стора после добавления драг’n’дропа

Всем привет, возникла такая проблема: есть список элементов с драг н дропом, при добавлении в него нового элемента не происходит ререндер компонента (в стор все приходит) P.S. до добавления днд все работало номрально.

код компонента:

19
Апр
2020

JS Работа с несколькими экземплярами класса

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

var inputContainerNode = document.querySelectorAll(‘.emails-input’);

for (let i = 0; i < inputContainerNode…

27
Мар
2020

Блокирование и разблокирование кнопки при отправке формы и получении серверных ошибок

Есть форма регистрации (созданная через Redux Form), которая отправляет данные на сервер. Если все успешно, происходит redirect, если нет – серверная ошибка выводится на экран. При серверной ошибке можно заблокировать кнопку следующим обра…

10
Мар
2020

Не отображаются обновленные данные Vue при изминении свойства с датой

На входе – имеем свойство ‘today’, вычисляемое свойство ‘CURRENT_YEAR’ и метод ‘prevYear’.
На выходе – при нажатии на стрелку влево вызывается метод который изменяет свойство (в нашем случае год) и в последствии чего шаблон должен обновить…

16
Фев
2020

На пути к отзывчивым элементам

Перевод статьи Towards Responsive Elements с сайта bkardell.com, опубликован на CSS-live.ru с разрешения автора — Брайана Карделла В этой статье я расскажу о проблеме «выражений от контейнера», попытаюсь пролить свет на некоторые заблуждения, и ввести вас в курс состояния дел. Наблюдение за стандартами может вогнать разработчика в ступор. Мы можем узнавать о разработке новых спецификаций, появлении новых функций, о которых мы и понятия не имели — возможно, каких-то для нас совсем неважных. При этом «Выражения […]

06
Фев
2020

Как создать массив кнопок с разными значениями?

Всем доброго дня.Новичок в React. Как из этой копипасты превратить код в аккуратную функцию с использованием map в отдельной компоненте, чтобы это аккуратно отображалось в основной компоненте?

<div className={styles.time}>
<d…

10
Июл
2018

Компоненты и разделение ответственности

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов. Это…
ДАЛЕЕ

22
Май
2018

eqio — простая, компактная альтернатива выражениям от элемента/контейнера

Перевод статьи eqio — A simple, tiny alternative to element/container queries с сайта medium.com для css-live.ru, автор — Мэтт Стоу Классические принципы отзывчивого дизайна больше не отвечают нашим, разработчиков дизайн-систем и библиотек компонентов для веба, потребностям. Если уж с этим согласен Итан…
ДАЛЕЕ

01
Мар
2018

Отзывчивые компоненты: решение проблемы выражений от контейнера

Перевод статьи Responsive Components: a Solution to the Container Queries Problem  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона. Выражения от контейнера (Container queries) — предложение, которое позволило бы веб-разработчикам оформлять DOM-элементы в зависимости от размера содержащего их элемента, а не окна браузера….
ДАЛЕЕ