Alex Karo

Если карта в области видимости - никак. Если карта вне экрана - повесьте евент на интерсекшн обсервер, и загружайте по нему.

Идея дурацкая, если честно, но сделать можно:

create sequence shared_sequence;
create table production_data(id bigint default nextval('shared_sequence'), value text);
create table demo_data(id bigint default nextval('shared_sequence'), value text);

Взять какой-нибудь esbuild или swc. Это простые статичные бинарники.

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

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

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

Например, я решал такую задачу следующим способом:
1. Создал объект правил доступа для различных компонентов/страниц.

const rules = {
  articles: {
    create: 'articles:create',
    edit: 'articles:edit'
  }
}

и так для проверки каждого требуемого правила, в котором возможна вариативность для разных уровней доступа, формат - компонент + доступные для него действия, но тут по желанию, требуется просто разграничить уникальность по компонентам.

2. Затем создал объект с уровнями доступа и доступными им правилами, для каждой роли это просто Set в который загоняются доступные действия из правил.

3. Ну и функция, которая на вход принимает правило и по текущей роли пользователя ищет в Set коллекции это самое правило, нашли - значит доступно, вернули true

Далее в нужном компоненте дергаем нашу функцию проверки прав, передавая туда правило для проверки доступа. Например, у нас просто обычный юзер залогинился, а не редактор.
Вызываем checkPermission(rules.articles.edit), если функа вернула false, то блокируем или скрываем кнопку редактирования статьи, ну и т.д.

Редактирование уровней доступа у нас в одном месте, на это же и редактор в целом написать можно будет отдельный, чтобы в коде не править, ну и хранить в таком формате доступы на бэке тогда и просто присылать на фронт открывая/закрывая/изменяя нужные разделы для определенных ролей и т.д.

В целом, это просто один из вариантов, который подошел именно мне, а так зависит многое от того, что за приложение, что именно разграничивать надо, сколько ролей будет, какие правила будут пересекаться и т.д.

Дичь какая-то - зачем вам хранить количество минут и часов? Достаточно секунд (да, их будет не 0-59, а сколько угодно), минуты и часы вычисляются, если нужны.

сбрасывается на 0 и начинает отсчет с предыдущего состояния

Что неудивительно - метод run работает с "несброшенными" данными. Чтобы иметь доступ к актуальному состоянию, используйте функциональное обновление.

делает это не CRA или реакт, а браузер, в примере на codepen у тебя используется древняя версия реакта, от того и результаты разные.
попробуй
document.body.style.color = 'hsl(10, 10%, 10%)';
если честно, не вижу в этом никакой проблемы, ты ведь внутри реакта работаешь с hsl значением, так какая разница во что он там конвертирует на выходе.
проблема может возникнуть если только ты будешь читать атрибут напрямую у DOM элемента, и тебе нужен будет hsl, но в таком случае ты что-то делаешь неправильно.

Бот «сломается» при большом числе запросов. Прежде, чем отдать ожидаемое «ok», он выполняет ещё два веб-запроса: users.get() и messages.send()– это съедает время и память. Будье готовы переключиться на схему с очередью и отдельными рабочими. Приняли запрос, сохранили, отдали "ok". Другой процесс, рабочий, неспеша разбирает задачи из очереди, отправляет ответы. Стали популярнее, добавили рабочих с других серверов.

Не проверяете user text на минимальную длину. Пришлют одну букву - получат весь FAQ. По мере роста FAQ'а, можете столкнуться с дубликацией: на запрос "hi" найдётся, скажем, ключ с "high load".

const arrOne = [
  { group: "Dog", key: "bad", value: "7" },
  { group: "Cat", key: "dear", value: "13" },
  { group: "Cat", key: "good", value: "20" },
];

const arrTwo = [
  { group: "Dog", key: "bad", value: "265" },
  { group: "Cat", key: "dear", value: "529" },
  { group: "Cat", key: "good", value: "956" },
]
let arrThree = [];

arrOne.forEach((itm, i) => {
  arrThree.push(Object.assign({}, itm, arrTwo[i]));
});

console.log(arrThree);

только два одинаковых ключа value не может быть) у вас пример некорректный)

Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:

Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.

Привет. Я не супер эксперт, но на сколько я знаю нет...
Для примера возьму твой верхний кусок кода

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials__wrapper_item">
                    <div class="testimonials__wrapper_item_img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials__wrapper_item_text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

я бы сделал так:

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials-item">
                    <div class="testimonials-item__img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials-item__text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

Но учти, что у меня сейчас почти 3 часа ночи, и за меня говорит мой кофе)