Задать вопрос
  • Как использовать свойство rotate?

    szQocks
    @szQocks
    const button = document.querySelector('.test');
    const circle = document.querySelector('.circle');
    
    button.addEventListener('click', () => {
      circle.style.transform = `translate(-50%, -50%) rotate(${circle.style.transform+30}deg)`;
    });
    Ответ написан
    2 комментария
  • Почему при переключении проксирования nginx на https возвращается 502 Bad Gateway?

    szQocks
    @szQocks
    server {
       listen 443 ssl;
        ssl_certificate        /etc/ssl/certificate.crt;
        ssl_certificate_key    /etc/ssl/private.key;
        server_name alltech.home.com;
    
        location /v1/doit/completions {
                proxy_ssl_server_name on;
                proxy_pass https://api.open.my/v1/doit/completions;
        }
             location / {
             root /usr/share/nginx/html/;
             autoindex off;
             }
    }
    Ответ написан
  • Как поставить 2 ссылки?

    szQocks
    @szQocks
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = 'https://site.com/thanks';
      setTimeout(() => window.open('https://site.com/thanks2', "_blank"))
    }, false );
    Ответ написан
  • Как задать 100% высоту?

    szQocks
    @szQocks
    .header__wrap{
      min-height: 500px;
      display: flex;
      flex-direction: column;
    }
    
    .header__content{
      flex: 1 1 0;
    }
    Ответ написан
    5 комментариев
  • Как объеденить вложенный объект?

    szQocks
    @szQocks
    const arr = [
                      {
                        "name": "Грузинская ж. д.",
                        "Щебень гранитный не поименованный в алфавите": {
                          "amount": 275,
                          "stavka": 0,
                          "revenue": 0
                        }
                      },
                      {
                        "name": "Московская ж. д.",
                        "Щебень гранитный не поименованный в алфавите": {
                          "amount": 138,
                          "stavka": 0,
                          "revenue": 0
                        }
                      }
                ]
    
    console.log(arr.map(n => ({ name: n.name, ...Object.values(n)[1] }) ))
    Ответ написан
    Комментировать
  • Как добавить класс к ссылке открытой страницы плюс с пагинацией?

    szQocks
    @szQocks
    Но когда я дописываю скрипт на проверку пагинации, он не работает

    function is_paged() {
      return window.location.pathname.split("/").includes('page')
    }


    какой код для фильтра писать, чтобы добавлялся класс я не знаю.

    function isFilter(){
      return window.location.pathname.split("/").some(n => n.split('=').includes('?filter_type_test'))
    }
    Ответ написан
    4 комментария
  • JS: ловлю форму с помощью mutationObserve, слушаю событие отправки формы, но событие не наступает, почему?

    szQocks
    @szQocks
    Я не знаю как ты изучаешь технологию, я хоть и не пишу на валидном, но я за 10 минут прочитал об
    MutationObserver

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

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

    Вот я написал пример - Пример
    Пусть сколько угодно будет раз вызвано событие submit - так как форма не изменилась - то и вызван коллбэк в MutationObserver не будет. Но если при submit - на форму повесить атрибут id рандомный - то коллбэк будет вызван. Вообще бы не советовал пользоваться этой штукой, от неё мне кажется проблем больше, где-то не углядишь и она будет вызывать в те моменты когда ты их и не ожидаешь.
    Ответ написан
    1 комментарий
  • Как найти длину кривой Безье, и точки на ней через равные промежутки?

    szQocks
    @szQocks
    на вход функция принимает массив точек кривой безье, о том как найти точки в инете легко ищется, хотя это я нашёл так же в инете на просторах гитхаба xDD
    const subtract = (v1, v2) => ({
      x: v1.x - v2.x,
      y: v1.y - v2.y
    });
    
    const magnitude = ({ x, y }) => Math.sqrt(x * x + y * y);
    
    
    const pointDistance = (point1, point2) => magnitude(subtract(point1, point2));
    
    
    const curveLength = (points) => {
      let lastPoint = points[0];
      const pointsSansFirst = points.slice(1);
      return pointsSansFirst.reduce((acc, point) => {
        const dist = pointDistance(point, lastPoint);
        lastPoint = point;
        return acc + dist;
      }, 0);
    };
    Ответ написан
    Комментировать
  • Как event.target.closest совместить с if?

    szQocks
    @szQocks
    $(document).on('change', 'input.variable_manage_stock', function (event) {
     const variation = event.target.closest('.woocommerce_variation');
     const checkbox = event.target;
     const checkbox_on_off = checkbox.matches('input.variable_manage_stock:checked') && checkbox.value;
     if (checkbox_on_off == 'on' && variation){}
     if (checkbox_on_off == 'false'){}
    });
    Ответ написан
  • SetTimeout не работает внутри setInterval, как исправить?

    szQocks
    @szQocks
    Так попроще будет ? надеюсь додумаешься что там и как работает и не нужно будет расписывать

    let n = 0;
    const interval = setInterval(() => {
      if(n == 5){
        clearInterval(interval);
        return;
      }
      
      ++n;
      let t = n;
      console.log(`вызов setInterval № ${t} спустя ${100}мс`)
       setTimeout(() => {
      console.log(`вызов setTimeout № ${t} спустя ${5000}мс`)
    }, 5000)
    }, 100)
    Ответ написан
    Комментировать
  • Как определить, что ты авторизован по JWT токену в реакт?

    szQocks
    @szQocks
    при входе на сайт, проверить localStorage на наличие accessToken , если он там есть,
    в useEffect отправлять запрос на рефреш токенов ( отправлять refreshToken на получение новых токенов ), в ответ придут 2 токена ну и соответственное данные о юзере, токены сохраняем туда куда надо, а данные о юзере заносим в стейт
    Ответ написан
    Комментировать
  • Как удалить все объекты из массива по заданному свойству и правильно пересчитать значения данных свойств?

    szQocks
    @szQocks
    Ты не отфильтровываешь price , ты получаешь ссылку на отфильрованный массив, а сам price массив не изменяется.

    Решение:

    const deleteBaggagePrice = price = price.filter( //проверка price на наличие свойства baggageID
           (prop) => !prop.hasOwnProperty("baggageID") //если есь удалить объект
         );
    Ответ написан
    4 комментария
  • Почему не работает nodemailer?

    szQocks
    @szQocks
    Код по этой ссылке и не будет работать, код там не полный, это вершина айсберга, он возможно работал - раньше, сейчас если я не ошибаюсь то вся эта тема с nodemailer идёт через гугл, а в гугле куча мозготрёпки. Недавно я возился с этим nodemailer, пол дня ушло на то что бы настроить рассылку сообщение, могу лишь дать подсказку о том как делал я:

    Я nodemailer юзал в связке с googleapis
    Нужно как минимим регаться будет в гугле, создать там приложение для рассылки, связать 2 пакета nodemailer и googleapis на бэке, прокинуть в них нужны данные, например clientId - при создании приложения для рассылок - этот айдишник выдает приложение, так же где-то там взять client_secret и ещё возможно какие-то манипуляции о которых я даже и сам не помню, хотя недавно делал, в итоге должно быть что-то типа этого.

    const nodemailer = require("nodemailer");
    const { google } = require("googleapis");
    const OAuth2 = google.auth.OAuth2;
    const OAuth2_client = new OAuth2(clientId, client_secret);
    OAuth2_client.setCredentials({ refresh_token: refresGoogleToken });


    class MailService {
      static async sendActivationMail(to, activationLink) {
        const accessToken = await OAuth2_client.getAccessToken();
    
        const transporter = nodemailer.createTransport({
          service: "gmail",
          secure: false,
          auth: {
            type: "OAuth2",
            user: email,
            clientId: clientId,
            clientSecret: client_secret,
            refreshToken: refresGoogleToken,
            accessToken: accessToken, 
          },
          tls: {
            rejectUnauthorized: false,
          },
        });
    
        await transporter.sendMail({
          from: email,
          to,
         // и тут ниже остальная логика по созданию содержимого сообщения для почты, тут ничего ниже особенного нет
    Ответ написан
    Комментировать
  • Как сделать чтобы был максимум один кусок круга?

    szQocks
    @szQocks
    <div class="wrapper">
      <div class="piechart"></div>
    </div>


    .wrapper{
      border: 2px solid green;
      display: inline-flex;
    }
    .piechart{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 18rem;
        height: 18rem;
        border-radius: 50%;
        background: conic-gradient(#fff 0 25deg, red 0 65deg, #fff 0 270deg);
    }
    .piechart:after{
        content: '';
        width: 85%;
        height: 85%;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    Ответ написан
    Комментировать
  • Js игра зрение врагов 2д, как реализовать?

    szQocks
    @szQocks
    Пример

    <canvas width="1000px" height="1000px"></canvas>

    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d');
    
    const drawRect = (color, x, y, width, height) => {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
      return {
        color, x, y, width, height
      }
    }
       
    drawRect('blue', 50, 50, 20, 20)
    drawRect('black', 150, 150, 50, 150)
    
    const drawLine = (x1,y1,x2,y2) => {
      ctx.lineWidth = '3';
      ctx.strokeStyle = 'violet';
      ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.closePath();
      ctx.stroke();
    }
    
    
    canvas.addEventListener('click', (e) => {
      canvas.width += 0;
       
      const npc = drawRect('blue', 50, 50, 20, 20)
      const house = drawRect('black', 150, 150, 50, 150)
      drawRect('green', e.clientX, e.clientY, 20, 20)
      
      const x1 = npc.x, y1 = npc.y, x2 = e.clientX, y2 = e.clientY;
    
      const points = [];
      for(let i = 0.0; i <= 1; i = i+0.01){
        const gg = getPositionAlongTheLine(x1,y1,x2,y2, i);
        drawRect('aqua' ,gg.x, gg.y, 2 , 2)
        points.push({x: gg.x, y: gg.y, width: 10, height: 10})
      }
      
      for(let i = 0; i < points.length; i++){
        if(collides({...points[i], width: 2, height: 2}, house)){
          console.log('есть препятствие')
          return;
        }
      }
      drawLine(x1, y1, x2, y2)
    })
      
      // отдает координаты равные проценту расстояния: percentage максимум = 1 
      function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
        return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
      }
     
    
      function collides(a,b){
          return a.x < b.x + b.width &&
                 a.x + a.width > b.x &&
                 a.y < b.y + b.height &&
                 a.y + a.height > b.y;
      }


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

    Синий - нпс
    Черный - препятствие
    Зеленый - игрок

    Если нпс видит игрока - появляется линия между нпс и игроком.

    Игрок на карте появляется при нажатии на левую кнопку мыши.
    Ответ написан
    Комментировать
  • Почему не ловит e.target.value в select?

    szQocks
    @szQocks
    ты не повесил обработчик на Select который из "react-select"

    <Select
          isClearable
          placeholder={props.placeholder}
          classNamePrefix='custom-select'
          components={{
            ClearIndicator: () => <IoCloseOutline />,
            IndicatorSeparator: () => null,
            DropdownIndicator: () => <FaCaretDown />,
          }}
          styles={customSelectStyles}
          options={props.options}
          onChange={props.onChange}
        />
    Ответ написан
    Комментировать
  • Как вставить цифры в ячейки для игры в пятнашки?

    szQocks
    @szQocks
    ctx.fillText(text, this.x + 35, this.y + 70) // знак равно убери тут
    Ответ написан
    2 комментария
  • Как правильно задавать z-index?

    szQocks
    @szQocks
    Попробую расписать о том как работает z-index.

    К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент

    <div class="gg"></div>
    <div class="tt"></div>


    а вот и стили к ним

    .gg{
      z-index: 999;
      width: 100px;
      height: 100px;
      background: red;
    }
    
    .tt{
      z-index: 2;
      width: 100px;
      height: 100px;
      background: blue;
      margin-top: -50px;
    }


    Из документации сказано в каких случаях создаётся контекст стекирования
    1 - является корневым элементом (то есть HTML)
    2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
    3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
    4 - display: inline-flex;
    5 - элементы с opacity меньше чем 1
    6 - элементы с transform отличным от "none"
    7 - элементы с mix-blend-mode значением отличным от "normal"
    8 - элементы с filter значением отличным от "none"
    9 - элементы с isolation установленным в "isolate"
    10 - position: fixed;
    11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
    12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
    13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid

    Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )

    ----------------------------------------------------------------------------------------------- -------------------------

    Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.

    Добавим потомка для дива с классом gg в данном случае это див с классом gg__children
    <div class="gg">
      <div class="gg__children"></div> // потомок
    </div>
    <div class="tt"></div>


    а вот и стили

    .gg{
      width: 100px;
      height: 100px;
      background: red;
      z-index: 999;
    }
    
    .gg__children{
      width: 50px;
      height: 200px;
      background: green;
      z-index: 100;
    }
    
    .tt{
      width: 100px;
      height: 100px;
      background: blue;
      margin-top: -50px;
      z-index: 2;
    }


    так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
    а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех

    Советую как можно проще его использовать но зная основные принципы , или изучать от А до Я и проникнуть в саму суть его работы.

    Документация
    Ответ написан
    4 комментария
  • Как решить ошибку при установке mysql-server?

    szQocks
    @szQocks Автор вопроса
    Проблема в том что машине недостаточно оперативной памяти для запуска процесса, решить это можно двумя способами на сколько я узнал:
    1 - swapfile , гуглиться очень просто к примеру - "swapfile ubuntu"
    2 - расширить оперативку сменой тарифа на хосте
    Ответ написан
    Комментировать
  • Можно ли React компонент передать в функцию/метод другого компонента?

    szQocks
    @szQocks Автор вопроса
    Можно! Но нужно помнить что хранить компонент в useState - является не хорошей практикой, это нужно учитывать, и задуматься , а действительно ли так необходимо прокидывать компонент таким образом.
    Ответ написан