• Почему пропадает before?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    z-index:1;

    Но его тоже нужно будет скейлить с картинкой

    Лучше заверните все в доп блок и его увеличивайте

    .block
      .wrapper
       ::before
       img
    
    .block:hover .wrapper {  transform }
    Ответ написан
    Комментировать
  • Является ли это корректной записью?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Не является. Массив используется на хранения списка значений, в нём нет никаких "имён".
    Значения с "именами" можно хранить либо в объекте, либо в специальном типе Map.

    Но при этом, если речь про значения примитивных типов, то при их добавлении в объект или Map теряется связь с изначальной переменной, откуда значение было взято.

    let a = 3;
    let b = 15;
    
    let one = {};
    
    one.a = a;
    one.b = b;
    
    a = 42;
    
    console.log(one.a, one.b); // 3, 15
    console.log(a, b); // 42, 15


    let a = 3;
    let b = 15;
    
    let two = new Map();
    
    two.set('a', a);
    two.set('b', b);
    
    a = 42;
    
    console.log(two.get('a'), two.get('b')); // 3, 15
    console.log(a, b); // 42, 15
    Ответ написан
    Комментировать
  • Как исправить ошибку при подключении библиотеки?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    В документации как бы есть инструкция:
    import autoAnimate from '@formkit/auto-animate'

    https://auto-animate.formkit.com/#usage
    Ответ написан
    Комментировать
  • Как хранить данные для кастомного блока code?

    Vindicar
    @Vindicar
    RTFM!
    БД тут абсолютно ни причём. Она хранит текст в том виде, в каком ты его туда поместил, вплоть до байта.
    Это браузеры по умолчанию сокращает отступы в ходе рендеринга HTML. Но есть теги вроде <pre>, которые отступы сохраняют. Также можно использовать CSS-свойство white-space со значениями pre или pre-wrap.

    Ответ написан
    Комментировать
  • Как корректно работать с react router?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вы создали не правильную структуру компонентов React Router. < Router> должен быть размещен в самом верху относительно вложенности всех компонентов, обычно это в районе < App>. Так же, для навигации Вы используете href, когда должны использовать компонент React Router - Link.

    Это что такое?
    <Route exact path='/contacts' Component={Contacts} />
    // Component={Contacts} ???

    Попробуйте так (если App является корневым компонентом):
    import React from 'react';
    import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
    import './App.scss';
    
    import Header from './components/Header';
    import Service from './pages/Service';
    import Contacts from './pages/Contacts';
    import Login from './pages/Login';
    import Home from './pages/Home';
    
    function App() {
      return (
        <Router>
          <div className="App">
            <Header />
    
            <nav>
              <Link to="/">Главная</Link>
              <Link to="/service">Услуги</Link>
              <Link to="/contacts">Контакты</Link>
              <Link to="/login">Вход</Link>
            </nav>
    
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/service" element={<Service />} />
              <Route path="/contacts" element={<Contacts />} />
              <Route path="/login" element={<Login />} />
    
              <Route path="*" element={<NotFoundRoute/>} />
            </Routes>
          </div>
        </Router>
      );
    }
    
    // not fount route handler
    function NotFoundRoute() {
      return <div>Page not found</div>;
    }
    
    export default App;

    Header.js:
    import {Link} from "react-router-dom";
    
    function Header(props) {
      return (
        <>
          <header>
            // ...
    
            <Link to="/service">Услуги</Link>
            <Link to="/contacts">Контакты</Link>
    
            // ...
          </header>
        </>
      )
    }
    
    export default Header;
    Ответ написан
    Комментировать
  • Как отследить запросы?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Ты в любом случае отрабатываешь только "второй" запрос, который 200. Редирект делается внутри xhr/fetch прозрачно для кода, их использующего.

    проблема возникает в обратной ситуации, когда надо, например, получить какие-нибудь заголовки ответа 3xx - до них не добраться.
    Ответ написан
    Комментировать
  • Нужно ли снова устанавливать Node.js для каждого нового проекта?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Попробую объяснить простым языком.

    0. Каждый проект по умолчанию имеет свои локальный пакеты (библиотеки), которые самостоятельно устанавливаются в корневую директорию node_modules, они устанавливаются на основе файла проекта package.json (инициализация).

    Предположим, что Вы не используете контейнеризацию, то:
    1. Ноду необходимо ставить глобально, например 18 версии. Что такое глобально? В таком случае, все Ваши проекты NodeJS смогут использовать эту ноду, хотя нода при этом не будет находиться локально ни в одном из Ваших проектов.
    2. Если все Ваши проекты используют исключительно ноду 18 версии, то дополнительную ноду ставить не требуется.
    ---
    3. Если у Вас проекты используют разные версии ноды, то рекомендую с нодой работать не на прямую, а через nvm (установка/удаление/переключение).
    ---
    4. Если Вы используете контейнеризацию, то обычно, нода+проект ставится в каждый контейнер.
    Ответ написан
    Комментировать
  • Что быстрее SQL или Javascript?

    ipatiev
    @ipatiev
    Потомок старинного рода Ипатьевых-Колотитьевых
    В общем, чтобы не издеваться над девушкой, объясним на пальцах.

    Во-первых, заголовок у вопроса чудовищно некорректный. Это все равно что спросить, "что быстрее - пылесос или стиральная машина?"
    Во-вторых, ответ на вопрос "производить ли обработку данных в БД или же запросить все данные в клиентское приложение и обрабатывать там" совершенно очевиден: обработку данных следует производить в общем случае только в БД. Она для этого и придумана. Чтобы обрабатывать значительные объемы данных.

    Да, js тоже "может" обрабатывать большие объемы данных.
    Но чтобы значительный объем данных обработать, его сначала надо передать, полностью забив канал между сайтом и базой
    Чтобы значительный объем данных обработать, его надо сначала проиндексировать. Причем делать это каждый раз, а не использовать уже имеющийся набор индексов
    Чтобы значительный объем данных обработать, надо иметь значительный объем памяти или упасть из-за её недостатка
    Чтобы значительный объем данных обработать в многопоточном режиме (а сайт как раз является многопоточной системой), все вышеперечисленное надо умножить на количество посетителей сайта - при каждом запросе перегонять весь массив данных, выделять память, индексировать, считать. Если же вы оставляете все данные в памяти приложения, то их тогда надо как-то синхронизировать с БД. То есть вы себе собираете кучу проблем на пустом месте.

    Несомненно, из любого правила есть исключения. И бывают ситуации, когда приходится считать в приложении.
    Но на вопрос в общем виде ответ будет совершенно однозначный. Не "может так, может сяк", а только в БД.
    Ответ написан
    9 комментариев
  • Как добавить сюда анимацию?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну как-то так. Набросал на коленке.

    .pic {
      display: inline-block;
    
    }
    
    .pic img {
      opacity: 1;
      transition: opacity 1s linear;  
    }
    
    .pic img.invisible {
      opacity: 0;
    }
    
    button {
      padding: 1em;
    }
    
    button.active {
      background: tomato;
    }


    document.body.addEventListener('click', e => {
      if (!e.target.matches('button')) return
      
      const img = document.querySelector('.pic img')
      
      img.classList.add('invisible')
      
      img.ontransitionend = () => {
        img.onload = () => img.classList.remove('invisible')
        img.src = e.target.dataset.src
        
        document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
        e.target.classList.add('active')
      } 
    })


    P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
    А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.
    Ответ написан
    4 комментария
  • Почему не удаляется класс по setTimeout?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Классическая потеря this. Правда, странно, что при этом нет ошибок в консоли, когда вы на window пытаетесь removeClass вызвать.

    $(".box43z6r6QZ").click(function(){
       var $el = $(this);
    
        $el.addClass("hG8KlY3Q");
    
        setTimeout(function(){
            $el.removeClass("hG8KlY3Q");
        }, 1000);
    });
    Ответ написан
    Комментировать
  • Как правильно пройтись по всем элементам на странице?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Пытаюсь через document.querySelectorAll но тоже выходит ошибка

    Надо лучше пытаться:
    <script>
    // Получаем все карточки товаров
    const cards = document.querySelectorAll('.cart');
    
    cards.forEach((card) => {
      const addToCartLink = card.querySelector('.buy_button');
      const inputElement = card.querySelector('.kolvo input');
      const plusButton = card.querySelector('.kolvo .plus');
      const minusButton = card.querySelector('.kolvo .minus');
    
      // Функция для обновления ссылки при изменении значения input
      const updateLink = () => {
        const inputValue = inputElement.value;
        const newLink = addToCartLink.getAttribute('href').replace(/q=\d+/, 'q=' + inputValue);
        addToCartLink.setAttribute('href', newLink);
      };
    
      // plus
      plusButton.addEventListener('click', () => {
        inputElement.stepUp();
        updateLink();
      });
    
      // minus
      minusButton.addEventListener('click', () => {
        inputElement.stepDown();
        updateLink();
      });
    
      // Обработчик события при изменении значения input
      inputElement.addEventListener('input', () => {
        updateLink();
      });
    });
    </script>
    <div class="cart">
    <a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>
    
    <div class="kolvo">
    <span class="minus">-</span>
    <input type="number" value="1" min="1">
    <span class="plus">+</span>
    </div></div>
    Ответ написан
    3 комментария
  • Как следить за версионностью в клиент-серверном приложении, в выпускаемых фичах продукта?

    vabka
    @vabka
    Токсичный шарпист
    Вы пытаетесь решить несуществующую проблему.
    1. Нет никакой проблемы в том что два разных приложения (клиент и сервер) имеют разную нумерацию.
    2. semver нужен только если у тебя есть какой-то контракт, который тебе нужно соблюдать. Если контракта нет - можно использовать просто номера релизов.
    Ответ написан
    3 комментария
  • Как устранить ошибку Cannot read properties of undefined (reading 'preventDefault')?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Судя по всему, компонент Form, не представленный в вопросе, вызывает onSubmit без каких-либо параметров.
    Ответ написан
    Комментировать
  • Как присвоить функцию с аргументами, не вызывая её, лучше?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Ничего не лучше - показанные куски кода делают разное. Откройте консоль, выполните

    (function() {
      function func(arg) {
        console.log(arg, this);
      }
    
      let arg = 1;
    
      const f1 = () => func(arg);
      const f2 = func.bind(this, arg);
    
      arg = 2;
    
      f1();
      f2();
    }).call('hello, world!!');

    , подумайте над полученными результатами.

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

    0xD34F
    @0xD34F Куратор тега React
    Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

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

    Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

    const onChange = ({ target: { value } }) => {
      setVal(value);
      setPrintVariables(value.length > 1
        ? arrayVariables.filter(n => n.includes(value))
        : []
      );
    };

    <input value={val} onChange={onChange} />

    ??
    Ответ написан
    1 комментарий
  • При использовании методов добавления элементов в массив он под капотом создается заново?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Т.е. операции по типу [[...arr], value] так же сработают по скорости и логике, как arr.push(value)?
    Про скорость ответили, скажу про логику: она у этих операций разная. В первом случае создаётся новый массив, во втором изменяется существующий. Это важно, если важна иммутабельность, как, например, в Реакте.
    Ответ написан
    Комментировать
  • При использовании методов добавления элементов в массив он под капотом создается заново?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Т.е. операции по типу [[...arr], value] так же сработают по скорости и логике, как arr.push(value)?

    Нет. push быстрее.

    А если чуть более детально, то под капотом это выглядит примерно так:
    - Вы объявили пустой массив. Движок зарезервировал память на массив из 10ти(разные движки могут под разную длину массива резервировать место) элементов.
    - Делаете пуш. Пока элементов меньше чем зарезервировано - всё очень быстро, так как движок просто кладёт элемент в зарезервированную ячейку памяти, адрес которой известен.
    - Как только элементов стало больше, под капотом ищется новая доступная область памяти на ещё 10 элементов и далее эти области памяти линкуются между собой (первая + вторая).

    В случае же со spread [...array] каждый раз создаётся новый массив, то есть каждый раз происходит поиск доступной памяти на массив + перебор массива для того чтобы заспредить его.

    Примерно так.
    Ответ написан
    2 комментария
  • Что ещё проверять для безопасности?

    vabka
    @vabka
    Токсичный шарпист
    Вот эта строка ничего не делает :)
    if(message.length > 150) message.substring(0, 150)

    Конкретно в показанном коде больше никаких уязвимостей не видно.
    Так что только общие советы - открывай OWASP и проверяй всё по порядку для своего приложения.
    Ответ написан
    4 комментария