• Как создать массив из нескольких input jquery?

    szQocks
    @szQocks
    const fn = (str, value) => {
      const v = str.split('[').slice(-2).map(n => n.replace(']', ''));
      return {
        [v[0]]: {
          [v[1]]: value
        }
      }
    } 
    
    console.log(fn('result[1][question]', 123))
    Ответ написан
    Комментировать
  • Почему при обращении к классу active, ничего не происходит?

    szQocks
    @szQocks
    проблема в том что внутри .program__link , нет элемента с классом .active

    и там ещё опечатка где между классом и after

    .program__link .active ::after

    оставь просто .active::after в css
    Ответ написан
    2 комментария
  • В чем проблема блоку определить доступную высоту?

    szQocks
    @szQocks
    потому что у тебя у блока info стоит flex-direction: column; ( вертикальная ось ) в которой за расположением высоты элементов уже отвечает justify-content - а значение по умолчанию у justify-content является flex-start, по факту если указать блоку info justify-content: stretch он должен элементы флекс контенера распределить так что бы высота у элементов занимала всё пространство, но по какой-то причине этой магии не происходит, зато если указать блоку .list явно что он должен занимать пространство всё относительно свой оси, а если он является вертикальная то flex: 1 1 0; - даст блоку возможность занимать всю высоту
    Ответ написан
  • Nodejs + soket.io, как получить ответ из telegram бота?

    szQocks
    @szQocks
    правильнее будет пользоваться уже готовыми решениями, и не выносить мозги, ни себе не другим

    https://www.npmjs.com/package/node-telegram-bot-api
    Ответ написан
    1 комментарий
  • Как дополнить функцию получения id?

    szQocks
    @szQocks
    const arr = [
     {id: 1, info: 'some'},
     {id: 5, info: 'some'},
     {id: 3, info: 'some'},
     {id: 9, info: 'some'},
     {id: 6, info: 'some'},
    ];
    
    const findId = (_arr, isNeedToSort) => {
      const arr = isNeedToSort ? _arr.slice().sort((a ,b )=> a.id - b.id) : _arr;
    
      for(let i = 0; i < arr.length; i++){
        if(i + 1 !== arr[i].id) return i + 1;
      }
    }
    
    console.log(findId(arr, true))
    Ответ написан
    2 комментария
  • Как в react-router установить дефолтное отображение Outlet?

    szQocks
    @szQocks
    попробуй

    {
                    index: true,
                    element: <DashboardLayout/>,
                }


    там в доке типы у роутов описаны, то есть какие параметры принимает и даже есть пример, где показаны 2 возможности создания роутов, и они полностью на выходе одинаковые, и в низу описаны типы и там есть параметр index, и если его можно указать как в компоненте, значит в и массиве его тоже указать можно ,в объекте
    Ответ написан
    2 комментария
  • Можно ли в css сделать сквозную кнопку?

    szQocks
    @szQocks
    pointer-events: none;
    Ответ написан
    Комментировать
  • Работает ли сейчас meta keywords?

    szQocks
    @szQocks
    Работает ли сейчас meta keywords?
    - работает, но можно не заполнять ключевыми словами, пусть это сделает робот за тебя, но сам тег должен присутствовать на странице

    мертвые ссылки ( например ссылки с решеткой ) - это минус, таких ссылок не должно быть
    раскидай ARIA-атрибуты по минимуму
    на каждой странице свой дескрипшн
    сделать sitemap
    сделать robots.txt

    так же разобраться с одинаковым контентом где присутствуют ссылки, почитать подробнее про аттрибут canonical
    Ответ написан
    1 комментарий
  • Почему теряется интервал (Next.js)?

    szQocks
    @szQocks
    при изменении зависимостей, создаётся новая функция в useCallback, в котором создаётся ссылка на новый интервал, ссылка на старый интервал - потеряна

    если переменную interval заменить на ref, то всё сработает, но лучше бы - логику по интервалу вынести в useEffect, а в handlePlay - менять только флаг стейта
    Ответ написан
    1 комментарий
  • Почему не работает valid вместе с focus в CSS?

    szQocks
    @szQocks
    добавь аттрибут require для инпута
    Ответ написан
  • Как нарисовать рамку треугольникам если он построен в conic-gradient?

    szQocks
    @szQocks
    width: 400px;
        height: 400px;
        border-radius: 50%;
        background: conic-gradient( from -90deg, rgba(236, 55, 0, 1) 0 12.5%,rgba(245, 245, 245, 1) 0 25%,rgba(236, 55, 0, 1) 0 37.5%,rgba(245, 245, 245, 1) 0 50%,rgba(236, 55, 0, 1) 0 62.5%,rgba(245, 245, 245, 1) 0 75%,rgba(236, 55, 0, 1) 0 87.5%,rgba(245, 245, 245, 1) 0 100% );
    Ответ написан
  • Как можно избежать сдвига контента при открытии модального окна?

    szQocks
    @szQocks
    function bodyLock() {
    		document.body.style.overflow = 'hidden';
    }
    
    function bodyUnlock() {
    		document.body.removeAttribute('style');
    }
    Ответ написан
    Комментировать
  • Почему не происходит Navigate?

    szQocks
    @szQocks
    import React, { useState } from 'react';
    import { Navigate } from "react-router-dom";
    import axios from 'axios';
    import './login.css';
    
    function Login() {
        const [login, setLogin] = useState('');
        const [password, setPassword] = useState('');
        const [loginClass, setLoginClass] = useState('');
        const [passwordClass, setPasswordClass] = useState('');
    
        const [isLoggedIn, setIsLoggedIn] = useState(false);
    
        const submit = async (evt) => {
            evt.preventDefault(); // Предотвращаем отправку формы
            console.log(login, password);
            if (login.length === 0 || password.length === 0) {
                console.log('stop')
                if (!login) { // Проверяем, не пустое ли поле login
                    setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
                }
    
                if (!password) { // Проверяем, не пустое ли поле password
                    setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
                }
            } else {
                console.log('req')
                await axios
                    .post('http://localhost:5000/test/auth/login', {
                        login: login,
                        password: password
                    })
                    .then((response) => {
                        console.log(response);
                        const { data } = response;
                        if (data.status == 200) {
                            console.log('entered successfully');
    
                            // Здесь изменяется состояние
    
                            setIsLoggedIn(true);
                        } else {
                            console.log('could not enter');
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
    
                setPassword('');
                setLogin('');
                setLoginClass('');
                setPasswordClass('');
            }
        };
    
        if (isLoggedIn) {
             return <Navigate to="/main" replace={true}/>
        }
    
        return (
            <div className="container col-xl-10 col-xxl-8 px-4 py-5">
                <div className="row align-items-center g-lg-5 py-5">
                    <div className="col-lg-7 text-center text-lg-start ">
                        <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>
                        <p className="col-lg-10 fs-4">
                            Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!
                        </p>
                    </div>
                    <div className="col-md-10 mx-auto col-lg-5">
                        <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">
                            <h2 className="mb-4">Вход</h2>
                            <div className="form-floating mb-3">
                                <input
                                    type="text"
                                    className={`form-control ${loginClass}`}
                                    id="login"
                                    placeholder="Введите логин"
                                    value={login}
                                    onChange={(evt) => { setLogin(evt.target.value) }}
                                />
                                <label htmlFor="login">Логин</label>
                            </div>
                            <div className="form-floating mb-3">
                                <input
                                    type="password"
                                    className={`form-control ${passwordClass}`}
                                    id="password"
                                    placeholder="Введите пароль"
                                    value={password}
                                    onChange={(evt) => { setPassword(evt.target.value) }}
                                />
                                <label htmlFor="password">Пароль</label>
                            </div>
                            <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
    
    export default Login;
    Ответ написан
    Комментировать
  • Как сделать ширину или высоту блока по содержимому + (что-то)?

    szQocks
    @szQocks
    <div class="container">
      <div class="div2">
        <code>&lt;a&gt;&lt;/a&gt;</code>
        <p>ссылка</p>
      </div>
    </div>


    .container{
        margin: 50px auto;
        display: flex;
        justify-content: center;
        width: 500px;
    }
    .div2{
        background-color: #c8a185;
        color: #30464f;
        flex-shrink: 0;
        width: 110%;
    }
    Ответ написан
    Комментировать
  • Как сохранить отображение svg path после проигрывания анимации?

    szQocks
    @szQocks
    сделать изначально stroke-dashoffset: 0;

    пример

    .c-dashed-line__path {
    	animation: c-dashed-line-path 3s ease-in-out ;
    	fill: none;
    	stroke: #fff;
    	stroke-dasharray: 241; /* this is the entire length of the line */
    	stroke-dashoffset: 0; /* this is the entire length of the line */
    	stroke-width: 2;
    }
    
    @keyframes c-dashed-line-path {
    	0% {
    		stroke-dashoffset:241;
    	}
      	100% {
    		stroke-dashoffset:0;
    	}
    }

    Ответ написан
    Комментировать
  • Каким образом происходит привязка через bind?

    szQocks
    @szQocks
    вангую, this.onChange - используется потом в обработчике у инпута например или при клике на кнопке, и если внутри метода this.onChange - идёт обращение к this - и если не прибиндить метод к классу, то this будет ссылаться на элемент на который повесили обработчик
    Ответ написан
    Комментировать
  • При работе с вебсокетами, лучше плодить отдельные события, или одно, которое будет содержать весь объект?

    szQocks
    @szQocks
    Сразу юзера удалять - не надо!
    Банить и потом по крону в бд чистить аккаунты.

    Предположим что юзер находится на сайте, и в этот момент его забанили. Он будет видеть интерфейс - и при любом запросе на сервере - промежуточный обработчик на сервере на авторизацию ( middleware ) - должен понять что юзер забанен и выдать на фронт ошибку с тем что юзер якобы забанен, либо просто не авторизован.

    Что делать на фронте, когда ты получишь сообщения о том что юзер забанен или ошибка авторизации ? Я например писал интерцептор для axios который как раз таки и проверяет был ли ответ с сервера 401, и если да то отправлял запрос на refresh для обновления токенов и т.д - но суть не в этом, суть в том что в этот момент можно как раз таки проверить на то забанен ли юзер -и если да перезагрузить страницу, и все проблемы решены, сразу отключиться сокеты и вся остальная шляпа. Если такой вариант устраивает - успехов в реализации.
    Ответ написан
  • Почему в обработчике старый state?

    szQocks
    @szQocks
    происходит перерендер Wrapper, рендерится второй Inner. После этого запускается onUnmount первого Inner, в консоли вижу null,
    - происходит перерендер Wrapper, рендерится второй Inner, в который попадает функция update в котором state равен null, после запускается onUnmount первого Inner и т.д

    демо

    и вообще не советую в функции возврата обновлять какой-то стейт кроме глобального стора который относится ко всему приложению

    если компонент размонтируется, и вызовится функция возврата из useEffect например которая обновляет какой-то там стейт верхнего компонент который там же размонтировывается, а пользователь просто открыл другую страницу в SPA, то будет сбой
    Ответ написан
    Комментировать
  • Почему функция в объекте может иметь значение "undefined"?

    szQocks
    @szQocks
    а почему ты тут возвращаешь объект, внутри которого идёт вызов функции ? + которая возвращает вообще jsx

    { col.map((coll) => (
                    {coll.render('qewqr')}
                ))}


    может так хотел ?
    { col.map((coll) => coll.render('qewqr'))}
    Ответ написан
    Комментировать