• Как исправить ошибку Cannot redeclare в Wordpress?

    TMProject
    @TMProject
    Frontend developer React/Redux
    function add_my_style() {
        wp_enqueue_style( 'eurekasmile_bootstrap', get_template_directory_uri() . '/assets/bootstrap/css/bootstrap.css');
    }
    add_action( 'wp_enqueue_scripts', 'add_my_style' );
    Ответ написан
    Комментировать
  • Почему не отменяются запросы на сервер (axios)?

    TMProject
    @TMProject
    Frontend developer React/Redux
    не правильно передаешь signal, это ведь свойство config, а не data

    const resTemps = await axios.post(
            '/api/files/datas',
            {
              fileNames: temps.map((temp) => temp.name),
              layer: degree,
              domain: { low: zoomDomain[0], high: zoomDomain[1] },
            },
            {
              signal: controllerTempsRef.current.signal,
            }
          );
    
          const resPressures = await axios.post(
            '/api/files/datas',
            {
              fileNames: pressures.map((pressure) => pressure.name),
              layer: degree,
              domain: { low: zoomDomain[0], high: zoomDomain[1] },
            },
            {
              signal: controllerPressuresRef.current.signal,
            }
          );
    Ответ написан
    1 комментарий
  • Как установить setTimeout внутри .each()?

    TMProject
    @TMProject
    Frontend developer React/Redux
    async function addClassAsync(element) {
      return new Promise((resolve) => {
        setTimeout(() => {
          element.addClass("show");
          resolve();
        }, 1000);
      });
    }
    
    async function processElements() {
      for (let i = 0; i < syncDate.length; i++) {
        await addClassAsync($(syncDate[i]));
      }
    }
    
    processElements()
    Ответ написан
    Комментировать
  • Как в React отправлять стейт на сервер при каждом его изменении?

    TMProject
    @TMProject
    Frontend developer React/Redux
    //Перед обновление стейта сохраняешь текущую версию
    const oldState = { ...state }
    //Обновляешь стейт
    setState({ foo: 'bar' });
    
    //Этот код нужно выполнять в юзефект с депсами стейта
    //Это массив измененных свойств 
    const changedProperties = {};
    for (const key in state) {
      if (state.hasOwnProperty(key) && oldState[key] !== state[key]) {
        changedProperties[key] = state[key];
      }
    }
    
    //Проверяем если были обновления и отправляем
    if (Object.keys(changedProperties).length > 0) {
      fetch('/endpoint', {
        method: 'POST',
        body: JSON.stringify(changedProperties),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((response) => {
        if (response) {
          console.log('Данные успешно обновлены на сервере');
        } else {
          console.log('Не удалось обновить данные на сервере');
          // В случае ошибки апдейтп можно откатить  стейт
          setState(oldState);
      });
    }


    По коду сам смотри куда тебе проще запихнуть
    Ответ написан
    Комментировать
  • Кеширование медленного запроса к БД в wordpress?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Попробуй так:
    function my_get_wpdm_post_count() {
        $cache_key = 'my_wpdm_post_count';
        $post_count = wp_cache_get( $cache_key );
        
        if ( false === $post_count ) {
            global $wpdb;
            $post_count = $wpdb->get_var(
                "SELECT COUNT(*) FROM {$wpdb->posts} WHERE post_type = 'wpdmpro' AND post_author = 1 AND post_status IN ('publish', 'private')"
            );
            wp_cache_set( $cache_key, $post_count );
        }
        
        return $post_count;
    }
    Ответ написан
    Комментировать
  • Конфликт плагинов Elementor и PAFE?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Выкинуть все конструкторы и сверстать самому, в чем проблема.
    Ответ написан
    Комментировать
  • Почему анимации обрезаются (framer-motion)?

    TMProject
    @TMProject
    Frontend developer React/Redux
    <AnimatePresence key={Math.random()} exitBeforeEnter>>
      <motion.div className='card' variants={animation}>
        Card
      </motion.div>
    </AnimatePresence>

    Попробуй так.
    Ответ написан
  • Почему MariaDB отжирает все больше и больше памяти?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Смотри в сторону таких проблем:
    1. большое количестве соединений
    2. настройка буферов
    3. использование памяти для кэша

    Один из возможных способов определить, что именно занимает память, это использовать инструменты мониторинга производительности, такие как pt-mysql-summary или pt-mysql-uptime
    Ответ написан
    2 комментария
  • Что вызывает ошибку, как установить react pagination?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Ошибка возникает из-за конфликта версий зависимостей. В сообщении об ошибке указаны разные требования к версии React от разных пакетов. Например, пакет @material-ui/core требует React версии "^16.8.0 || ^17.0.0", а пакет react-pagination вероятнее всего требует React версии "^16.8.0 || ^17.0.0 || ^18.0.0". В результате npm не может определить какую версию React использовать и выдает ошибку ERESOLVE.

    Вы можете попробовать установить пакет react-pagination с опцией --force, чтобы заставить npm принять неправильное разрешение зависимостей, однако это может привести к другим проблемам в вашем приложении. Лучше всего решить конфликт зависимостей, обновив версии пакетов так, чтобы они использовали совместимые версии React.
    Ответ написан
  • Как работать с асинхронными функциями в reducer redux?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Проблема заключается в том, что асинхронная функция img.onload выполняется после того, как функция-редюсер закончила свою работу, и к моменту выполнения img.onload объект state.canvas уже был обновлен и утрачен свою возможность использования. Это приводит к ошибке, которую вы видите.

    Для решения этой проблемы можно воспользоваться библиотекой Redux-Thunk, которая позволяет создавать асинхронные функции внутри функций-редюсеров. В вашем случае, вы можете заменить pushToUndo и pushToRedo на асинхронные функции, которые будут использовать dispatch для вызова функций-редюсеров после завершения асинхронной операции.

    Пример использования Redux-Thunk для вашего случая:
    import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
    
    export const loadImage = createAsyncThunk(
      'canvas/loadImage',
      async (dataURL, { getState }) => {
        const state = getState().canvas;
        const img = new Image();
        img.src = dataURL;
        return new Promise((resolve, reject) => {
          img.onload = () => {
            const ctx = state.canvas.getContext('2d');
            ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
            ctx.drawImage(img, 0, 0, state.canvas.width, state.canvas.height);
            resolve();
          };
          img.onerror = reject;
        });
      }
    );
    
    export const canvasSlice = createSlice({
      name: 'canvas',
      initialState: {
        canvas: null,
        undoList: [],
        redoList: [],
      },
      reducers: {
        setCanvas: (state, action) => {
          state.canvas = action.payload;
        },
        pushToUndo: (state, action) => {
          state.undoList.push(action.payload);
        },
        pushToRedo: (state, action) => {
          state.redoList.push(action.payload);
        },
        undo: (state) => {
          if (state.undoList.length) {
            const dataURL = state.undoList.pop();
            state.redoList.push(dataURL);
            dispatch(loadImage(dataURL));
          } else {
            console.log('Нет элементов для отката');
          }
        },
        redo: (state) => {
          if (state.redoList.length) {
            const dataURL = state.redoList.pop();
            state.undoList.push(state.canvas.toDataURL());
            dispatch(loadImage(dataURL));
          }
        },
      },
      extraReducers: (builder) => {
        builder.addCase(loadImage.pending, (state) => {
          // обработка начала загрузки изображения
        });
        builder.addCase(loadImage.fulfilled, (state) => {
          // обработка завершения загрузки изображения
        });
        builder.addCase(loadImage.rejected, (state) => {
          // обработка ошибки загрузки изображения
        });
      },
    });
    
    export const { setCanvas, pushToUndo, pushToRedo, undo, redo } = canvasSlice.actions;
    
    export default canvasSlice.reducer
    Ответ написан
    5 комментариев
  • Как определить коллизию квадратов?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Для определения коллизии между двумя квадратами можно использовать простой алгоритм:

    Определить границы каждого квадрата, то есть вычислить координаты левого верхнего угла и правого нижнего угла для каждого квадрата.
    Проверить, пересекаются ли границы квадратов по осям X и Y. Если пересекаются, значит квадраты могут столкнуться.
    Для проверки столкновения на самом деле нам нужно убедиться, что оба квадрата пересекаются на самом деле, а не только их границы. Для этого нужно проверить, есть ли пересечение между сторонами квадратов.
    Вот пример функции на JavaScript, которая реализует этот алгоритм:
    function detectCollision(sq1, sq2) {
      // вычисляем границы квадратов
      const sq1_left = sq1.x;
      const sq1_right = sq1.x + sq1.side;
      const sq1_top = sq1.y;
      const sq1_bottom = sq1.y + sq1.side;
      
      const sq2_left = sq2.x;
      const sq2_right = sq2.x + sq2.side;
      const sq2_top = sq2.y;
      const sq2_bottom = sq2.y + sq2.side;
      
      // проверяем, пересекаются ли границы квадратов по осям X и Y
      const x_collide = sq1_right >= sq2_left && sq1_left <= sq2_right;
      const y_collide = sq1_bottom >= sq2_top && sq1_top <= sq2_bottom;
      
      // если пересекаются, проверяем наличие пересечения сторон
      if (x_collide && y_collide) {
        const top_collision = sq1_bottom >= sq2_top && sq1_top <= sq2_top;
        const bottom_collision = sq1_top <= sq2_bottom && sq1_bottom >= sq2_bottom;
        const left_collision = sq1_right >= sq2_left && sq1_left <= sq2_left;
        const right_collision = sq1_left <= sq2_right && sq1_right >= sq2_right;
        
        return top_collision || bottom_collision || left_collision || right_collision;
      }
      
      return false;
    }


    Здесь sq1 и sq2 представляют объекты квадратов со следующими свойствами:
    const square = {
      x: 100, // координата левого верхнего угла по оси X
      y: 50, // координата левого верхнего угла по оси Y
      side: 30 // длина стороны квадрата
    };


    Эта функция возвращает true, если квадраты пересекаются, и false в противном случае
    Ответ написан
    Комментировать
  • Как из массива целых чисел найти все возможные комбинации (не только двух чисел, а и более) дающие искомую сумму?

    TMProject
    @TMProject
    Frontend developer React/Redux
    const arr = [1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 6, 7, 8, 11, 13, 31, 31, 44, 51, 81, 65, 63];
    const target = parseInt(prompt("enter number", "52"));
    
    function findCombinations(sum, startIndex, currentCombination) {
      if (sum === target) {
        console.log(currentCombination);
        return;
      }
    
      for (let i = startIndex; i < arr.length; i++) {
        const num = arr[i];
        const newSum = sum + num;
        if (newSum <= target) {
          findCombinations(newSum, i + 1, [...currentCombination, num]);
        }
      }
    }
    
    arr.sort((a, b) => b - a); // сортируем массив по убыванию, чтобы начинать с самых длинных комбинаций
    findCombinations(0, 0, []);
    Ответ написан
    Комментировать
  • Как при движении мыши(mousemove) сделать плавную карусель, которая передвигалась бы за мышкой?

    TMProject
    @TMProject
    Frontend developer React/Redux
    В вашем коде, чтобы создать плавный переход, необходимо добавить CSS свойство "transition" для элемента, который вы двигаете, то есть для "menuList". Например, можно добавить "transition: transform 0.2s ease-out" для плавного перехода.

    Также можно добавить более сложные эффекты перехода, например, использовать "cubic-bezier" или "ease-in-out" вместо "ease-out", чтобы создать более плавный эффект.

    Например, измененный код может выглядеть так:
    const onMouseDown = (evt) => {
        let posX = evt.pageX;
        let current = 0;
    
        const onMouseMove = (evt) => {
            if (evt.pageX < posX) {
                posX = evt.pageX;
                current -= 5;
            } else {
                posX = evt.pageX;
                current += 5;
            }
    
            menuList.style.transform = `translateX(${current}px)`;
        };
    
        menuList.addEventListener('pointermove', onMouseMove);
        menuList.style.transition = 'transform 0.2s ease-out';
    };
    
    menuList.addEventListener('pointerdown', onMouseDown);

    Это создаст плавный переход, когда вы будете двигать мышь над элементом "menuList". Вы можете настроить значение свойства "transition-duration" и "transition-timing-function" для создания нужного эффекта перехода.
    Ответ написан
  • Как в Array From в mapfn добавить {value: "",value1:""}?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Для добавления свойств "value" и "value1" к каждому элементу, создаваемому с помощью метода Array.from, в функцию mapfn нужно передать функцию, которая будет создавать объекты с нужными свойствами. Можно использовать следующий код:
    setInputDinamic(Array.from({length: numOfInputs}, () => ({ value: '', value1: '' })));

    Здесь передаваемая функция просто возвращает объект с нужными свойствами "value" и "value1". При этом массив создается из указанного числа элементов (заданного через переменную numOfInputs), каждый из которых будет создан с помощью этой функции.

    Таким образом, после выполнения этой команды, в переменной inputDinamic будет массив из numOfInputs объектов с пустыми свойствами "value" и "value1". Вы можете изменять значения этих свойств в любой момент, когда это необходимо
    Ответ написан
    2 комментария
  • Как ожидать нажатие кнопки в кнопке?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Для того, чтобы ожидать нажатие кнопки, можно использовать функционал InlineKeyboardMarkup вместо ReplyKeyboardMarkup.

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

    Вот как можно изменить ваш код, чтобы использовать InlineKeyboardMarkup:
    import telebot
    from telebot import types
    import config
    
    bot = telebot.TeleBot(config.token)
    ADMINS = [1111111]
    
    doska = []
    
    @bot.message_handler(commands=['start'])
    def start(message):
        markup = types.InlineKeyboardMarkup()
        btn1 = types.InlineKeyboardButton("Доска Почета", callback_data="doska")
        btn2 = types.InlineKeyboardButton("❓ Задать вопрос", callback_data="question")
        markup.add(btn1, btn2)
        bot.send_message(message.chat.id, text="Привет, {0.first_name}! Я бот инженерной школы".format(message.from_user), reply_markup=markup)
    
    @bot.callback_query_handler(func=lambda call: True)
    def callback_query(call):
        if call.data == "doska":
            markup = types.InlineKeyboardMarkup()
            btn1 = types.InlineKeyboardButton("Назад", callback_data="back")
            btn2 = types.InlineKeyboardButton("Редактировать", callback_data="edit")
            markup.add(btn1)
            if call.message.chat.id in ADMINS:
                markup.add(btn2)
            bot.send_message(call.message.chat.id, text="test text",reply_markup=markup)
        elif call.data == "back":
            markup = types.InlineKeyboardMarkup()
            btn1 = types.InlineKeyboardButton("Доска Почета", callback_data="doska")
            btn2 = types.InlineKeyboardButton("❓ Задать вопрос", callback_data="question")
            markup.add(btn1, btn2)
            bot.send_message(call.message.chat.id, text="Вы вернулись в главное меню", reply_markup=markup)
    
    if __name__ == '__main__':
         print("bot start work")
         bot.infinity_polling()
    Ответ написан
    1 комментарий
  • Правильно ли давать классы блокам по контексту?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Оба подхода могут быть правильными в зависимости от конкретного контекста и целей проекта.

    Если вы ожидаете, что блок карточки будет использоваться в нескольких местах на вашем сайте или приложении, то лучше использовать второй подход, где классы будут относиться к абстрактным блокам (header, body, footer), чтобы их можно было легко переиспользовать.

    Если же блок карточки будет использоваться только в одном месте и имеет уникальный дизайн, то можно использовать первый подход, где классы будут отражать конкретные элементы карточки (username, avatar, actions).

    В любом случае, важно придерживаться консистентности и использовать понятные и легко запоминающиеся имена классов для удобства сопровождения и совместной работы с другими разработчиками
    Ответ написан
    Комментировать
  • Кто поможет сделать дз по информатике?

    TMProject
    @TMProject
    Frontend developer React/Redux
    const R = 6371; // радиус Земли в км
    
    // запрос высоты точки у пользователя
    const height = prompt("Введите высоту точки в км");
    
    // вычисление расстояния до линии горизонта Земли
    const horizonDistance = Math.sqrt((2 * R * height) + (height ** 2));
    
    // вывод результата
    console.log(`Расстояние до линии горизонта Земли: ${horizonDistance.toFixed(2)} км`);


    Как это работает:

    1. Мы объявляем константу R с радиусом Земли в км, равным 6371.
    2. Мы запрашиваем у пользователя высоту точки и сохраняем ее в переменной height.
    3. Мы используем формулу, чтобы вычислить расстояние от точки до линии горизонта Земли: horizonDistance = sqrt(2*R*height + height^2).
    4. Мы выводим результат с помощью console.log().
    5. Обратите внимание, что мы использовали метод toFixed() для округления результата до 2 знаков после запятой
    Ответ написан
    Комментировать
  • Как можно использовать Foreign Key?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Foreign key (внешний ключ) - это механизм, который позволяет связывать данные из двух таблиц в базе данных, где одна таблица ссылается на другую посредством поля, которое является первичным ключом в таблице, на которую она ссылается.

    Использование foreign key имеет несколько преимуществ. Одно из них - обеспечение целостности данных, то есть предотвращение появления некорректных значений в таблице. Когда вы устанавливаете foreign key, вы создаете ограничение, которое не позволит вставить запись в таблицу, если нет соответствующего значения в связанной таблице.

    Чтобы создать foreign key, вы должны выполнить следующие шаги:
    1. Создайте таблицу, которая будет ссылаться на другую таблицу:
      CREATE TABLE table1 (
          id INT PRIMARY KEY,
          name VARCHAR(50),
          table2_id INT,
          FOREIGN KEY (table2_id) REFERENCES table2(id)
      );


    2. Создайте таблицу, на которую будет ссылаться первая таблица:
      CREATE TABLE table2 (
          id INT PRIMARY KEY,
          name VARCHAR(50)
      );


    3. Установите связь между таблицами с помощью ключевого слова REFERENCES:
      FOREIGN KEY (table2_id) REFERENCES table2(id)


    В этом примере, мы создаем таблицу table1, которая имеет поле table2_id, которое ссылается на поле id в таблице table2. С помощью ключевого слова FOREIGN KEY мы говорим базе данных, что это поле должно быть связано с полем id в таблице table2.

    Также мы можем добавить ограничение ON DELETE, чтобы определить, что происходит с записями в таблице, которые связаны с удаленными записями из другой таблицы. Например:
    FOREIGN KEY (table2_id) REFERENCES table2(id) ON DELETE CASCADE

    В этом примере, мы указываем, что при удалении записи из таблицы table2, все связанные записи в таблице table1 также должны быть удалены (CASCADE).

    Таким образом, использование foreign key может значительно улучшить целостность данных в вашей базе данных, облегчить ее обслуживание и предотвратить появление ошибок в будущем.
    Ответ написан
    Комментировать
  • Подсчёт и разделение данных в гугл таблицах?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Для подсчета количества заполненных ячеек в Google Таблицах можно использовать функцию COUNTA. Например, если у вас есть список ФИО в диапазоне A1:A100, то формула для подсчета заполненных ячеек будет выглядеть так: =COUNTA(A1:A100). Эта формула вернет количество заполненных ячеек в диапазоне A1:A100.

    Чтобы поделить список поровну на два столбца, вы можете использовать функцию INDEX. Например, если у вас есть список ФИО в диапазоне A1:A100, и вы хотите разделить его поровну на два столбца в диапазоне B1:C50, то формула для первого столбца будет выглядеть так: =INDEX(A:A, 1+ROW(B1)*2-2), а для второго столбца: =INDEX(A:A, 1+ROW(B1)*2-1). Эти формулы вернут значения из списка ФИО, разделенные поровну на два столбца.

    Если вы хотите разделить список на три столбца, то формула для первого столбца будет выглядеть так: =INDEX(A:A, 1+ROW(B1)*3-3), для второго столбца: =INDEX(A:A, 1+ROW(B1)*3-2), а для третьего столбца: =INDEX(A:A, 1+ROW(B1)*3-1). Эти формулы вернут значения из списка ФИО, разделенные поровну на три столбца.

    Чтобы автоматически вставить значения в другой лист, вы можете использовать функцию IMPORTRANGE. Например, если у вас есть лист с именем Sheet1, на котором находится список ФИО и подсчитано количество заполненных ячеек, а также есть лист с именем Sheet2, на котором вы хотите разделить список на два столбца, то формула для первого столбца на листе Sheet2 будет выглядеть так:
    =INDEX(IMPORTRANGE("<spreadsheet_url>", "Sheet1!A:A"), 1+ROW(B1)*2-2)
    , где <spreadsheet_url> - это URL-адрес вашей таблицы. Аналогично для второго столбца.
    Ответ написан
    1 комментарий
  • Почему на айфоне происходит скролл, а на андроиде нет?

    TMProject
    @TMProject
    Frontend developer React/Redux
    Проблема скролла на мобильных устройствах может быть связана с различными факторами, включая размер экрана, устройства ввода и настройки браузера. На iOS и Android используются разные движки браузера, поэтому могут возникать различия в поведении скролла на разных устройствах.

    Однако, в представленных стилях есть свойство overflow: auto;, которое определяет, как будет обрабатываться содержимое, выходящее за пределы элемента, к которому это свойство применено. Если это свойство установлено на auto, то браузер самостоятельно определяет, должно ли появляться полоса прокрутки или нет. Это может привести к различному поведению скролла на разных устройствах.

    Если вы хотите, чтобы на всех устройствах отображалась полоса прокрутки, можно установить свойство overflow: scroll; вместо overflow: auto;. Однако, имейте в виду, что это может привести к отображению нескольких полос прокрутки на устройствах с маленькими экранами, что может быть неудобно для пользователей.

    Кроме того, если у вас есть контент, который выходит за пределы экрана, вы можете добавить height: 100%; в стили для элемента html, чтобы убедиться, что он занимает всю доступную высоту экрана.
    Ответ написан
    Комментировать