• Изменить исходный код страницы сайта?

    malente
    @malente
    В Chrome пользую: User JavaScript and CSS
    Ответ написан
    Комментировать
  • Как сделать, такую неравномерную фигуру?

    aliencash
    @aliencash
    Партизан
    CSS perspective
    У этого способа есть преимущества - рамка и тень делаются стандартными CSS свойствами.
    Ответ написан
    3 комментария
  • Как на javascript замерить время выполнения функции (в наносекундах)?

    Robur
    @Robur
    Знаю больше чем это необходимо
    точное время выполнения одного вызова функции получить довольно сложно.

    во первых - performance.now возвращает дробное число, поэтому там в принципе может быть наносекундная точность. однако стандарт определяет что точность должна быть 5 микросекунд. Плюс браузеры могут специально занижать точность чтобы бороться с некоторыми атаками.

    поэтому правильно вызывать функцию много раз и считать среднее.
    так же в ноде есть process.hrtime которая дает наносекунды.

    оба этих метода "в лоб" не дадут нормального результата. Почему? потому что в реальности происходит много всего интересного при выполнении кода.

    в движке есть неимоверное количество оптимизаций, и функция вызванная 10 раз будет иметь совершенно другой код чем функция вызванная 100 раз. То же касается и типов параметров - например вы можете передавать целые или дробные числа.
    На одну вашу написанную js-функцию движок сгенерирует несколько функций которые это реализуют. У этих функций может быть совершенно разный код с разной произодительностью.

    Переключение происходит на лету и в общем виде вы не знаете когда это происходит.

    поэтому само по себе замерение скорости "функции" имеет мало смысла, так как там их несколько внутри. Если интересны детали - погуглите JIT, AOT и v8 optimizations.
    Сейчас важно то что есть "холодные" функции которые работают медленее но надеждее и как правило используются сразу и есть "горячие" варианты, которые компилятор начинает использовать когда видит что код вызван много раз, и условия не меняются. "Горячие" работают быстрее.

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

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

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

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

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

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

    MvcBox
    @MvcBox
    Software Engineer [C/C++/JS(for Node.js)/etc]
    Комментировать
  • Как выстроить коммуникацию между редьюсерами, и стоит ли?

    @Che603000
    c 2011 javascript
    я могу вызывать один редьюсер из другого

    Не надо).
    action поступает на каждый reducer в store. .
    Каждый reducer по своему реагирует на один и тот же action и анализирую
    payload устанавливает свой state

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

    artzolin
    @artzolin
    php, WordPress разработка сайтов artzolin.ru
    Вы можете реализовать подобное через border-radius, тут демо
    Ответ написан
    1 комментарий
  • Текущий уровень громкости как в вк?

    fallus
    @fallus
    Если это 1 аудиоплеер, то:



    spoiler
    Если плееров много будет, то вместо querySelector юзать нужно querySelectorAll.
    Потом циклом по ним проходиться, подписывая события на каждый.
    И в этом случае, стоит обозначать, какой контейнер(с атрибутом data-hint) соответствует какому аудио-плееру.
    Проще всего, как в этом примере. Чтобы этот контейнер был родителем аудио-плееру.
    Чтобы в цикле, например, этот аудио-плеер можно было легко найти, например так:
    var myAudio = myAudioHoverBlock[i].querySelector('audio')
    Ответ написан
    Комментировать
  • Компиляция в машинный код?

    fox_12
    @fox_12
    Расставляю биты, управляю заряженными частицами
    > А откуда процессор берет инструкции как этот код читать?
    Скомпилированный код - нолики и единички - хранятся в определенной области памяти.
    Процессор запускает счетчик - с нуля к примеру - и читает ячейки памяти с 0 - допустим там хранится 0001 - а у процессора есть справочник команд. И если хранится 0001 - то это значит в следующих двух ячейках памяти хранятся операнды, которые нужно сложить и отправить в регистр - специальную ячейку памяти. Вот он выполняет действие над этими командами и инкрементирует счетчик у себя - команда и два операнда - значит счетчик увеличился на 3 . Теперь счетчик указывает на ячейку памяти 3 - и он считывает следующую команду. И т.д., и т.п....
    Ответ написан
    6 комментариев
  • Бинарный поиск - как определить кол-во шагов?

    М... так это же просто логарифм по основанию 2, округленный в большую сторону. Зачем вообще какие-то программы писать?
    Ответ написан
  • Как заполнить пространство по вертикали в CSS grid?

    wapster92
    @wapster92 Куратор тега CSS
    Оно по умолчанию заполнено. Если в пустое пространство нужны дополнительные ячейки, это уже не грид, а masonry. Еще можно попытаться использовать grid-auto-flow: dense, но для этого нужно указывать точную высоту ячейки.
    Ответ написан
    3 комментария
  • Как сделать прокрутку как на сайте Apple Music?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот тут человек тоже вдохновился продуктами Apple и реализовал библиотеку, которая позволяет делать эти вещи просто.
    Сам пока не использовал, но на первый взгляд выглядит просто и работает.
    Ответ написан
    Комментировать
  • Как сделать график?

    RAX7
    @RAX7
    chartjs
    Ответ написан
    Комментировать
  • Как сделать вот такой блок?

    fallus
    @fallus
    Ответ написан
    Комментировать
  • Почему при изменении состояния react-компонента в setInterval, значение состояния каждый раз сбрасывается к исходному?

    MiiZZo
    @MiiZZo Автор вопроса
    JavaScript, React, NodeJS, Student
    Пояснение из документации React:
    https://ru.reactjs.org/docs/hooks-faq.html#what-ca...
    function Counter() {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        const id = setInterval(() => {
          setCount(count + 1); // Этот эффект зависит от переменной состояния `count`
        }, 1000);
        return () => clearInterval(id);
      }, []); //  Баг: `count` не указан в качестве зависимости
    
      return <h1>{count}</h1>;
    }

    Пустой набор зависимостей [] означает, что эффект будет выполняться только один раз, когда компонент монтируется, а не при каждом повторном рендере. Проблема в том, что внутри обратного вызова setInterval значение count не изменяется, потому что мы создали замыкание со значением count, установленным в 0, как это было при выполнении обратного вызова эффекта. Каждую секунду этот обратный вызов вызывает setCount(0 + 1), поэтому счетчик никогда не превышает 1.

    Если переписать список зависимостей как [count], то баг будет устранён, но это приведёт к сбрасыванию интервала при каждом изменении. Такое поведение может быть нежелательно. Чтобы исправить это, мы можем применить форму функционального обновления хука setState, которая позволяет указать, как должно меняться состояние, не ссылаясь явно на текущее состояние:

    function Counter() {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        const id = setInterval(() => {
          setCount(c => c + 1); // ✅ Эта строчка не зависит от внешней переменной `count`
        }, 1000);
        return () => clearInterval(id);
      }, []); // ✅ Наш эффект не использует никаких переменных из области видимости компонента
    
      return <h1>{count}</h1>;
    }
    Ответ написан
    Комментировать
  • "Дешевле" фильтр по массиву js или запрос к API?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    Следуйте эмперическому правилу, если нет пэджинга или Инфинити скрула то обрабатывайте все на клиенте.
    Ответ написан
    5 комментариев
  • Как обновлять значения объекта, а не переписывать их?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если откинуть шелуху, вопрос сводится к тому, как объединять объекты «глубоко» — как делать deep merge.
    Довольно частый вопрос и есть несколько решений: использовать готовую библиотеку или написать рекурсивный обход свойств объекта: если свойство это объект, то (повторить для него). Если свойство примитив то скопировать.
    Ответ написан
    Комментировать
  • Как сделать сетку, чтобы блоки заполняли пробелы?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    То, что вы хотите, флексы не умеют. У флексов ряд будет всегда по высоте самого высокого блока, блоки из следующего ряда туда не попадут.
    Смотрите в сторону плагинов masonry, isotope
    Ответ написан
    Комментировать
  • Как поместить img на угол блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Абсолютное позиционирование.
    .border {
      position: relative;
    }
    .brushes {
      position: absolute;
      left: 100%;
      top: 100%;
      transform: translate(-50%,-50%); 
    }


    Середина картинки кисточек будет полностью совпадать с углом. Поэтому для достижения подходящей позиции надо играться с этими параметрами.
    Ответ написан
    1 комментарий