• Почему вылезает ошибка в webpack при компилляции SCSS?

    bingo347
    @bingo347
    Crazy on performance...
    ExtractTextPlugin устарел, и не работает с webpack 4
    используйте https://www.npmjs.com/package/mini-css-extract-plugin
    Ответ написан
    Комментировать
  • Как сделать, чтобы данные из одной функции передавались только после того, как завершится асинхронный запрос в другой функции?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    let lock;
    function a(data) {
        Promise.resolve(lock).then(() => send(data));
    }
    
    function b() {
        lock = Promise.all([
            lock,
            asyncRequestPromise().catch(err => {
                // обработка ошибки, иначе все упадет
            })
        ]).then(() => lock = void 0); // чистим память
    }
    
    a("some data");
    Ответ написан
    Комментировать
  • Нужна ли олимпиадная подготовка, чтобы стать программистом?

    bingo347
    @bingo347
    Crazy on performance...
    Разработчик должен более-менее разбираться в сфере, с которой он работает.
    Если в сфере задействовано много математики (научные расчеты например или машинное обучение) - то тут без математики не как.
    А вот в разработке, например, сайтиков для e-commerce гораздо нужнее будет знание продаж.

    Я понимаю, что хорошо, когда программист знает мат
    мат программисту жизненного не обходим, без него никак...
    Ответ написан
    2 комментария
  • Функция .html('') не видит полностью код?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Во-первых, если js внутри html, то строки содержащие </script> нужно разбивать:
    $('.map').html('<script charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A45374b4f36193c2c3bb5a22a9bffed35b78e3e041596ce43450258bbf7529fad&amp;width=100%25&amp;height=598&amp;lang=ru_UA&amp;scroll=false"> </sc' + 'ript>')


    Во-вторых, не уверен, что jQuery настолько умный, чтоб автоматом нормализовать вставку скрипта, по этому меняем эту строку так:
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A45374b4f36193c2c3bb5a22a9bffed35b78e3e041596ce43450258bbf7529fad&amp;width=100%25&amp;height=598&amp;lang=ru_UA&amp;scroll=false';
    $('.map').append(script);
    Ответ написан
    1 комментарий
  • Как вычислить формулу для расчета?

    bingo347
    @bingo347
    Crazy on performance...
    L = π * R * acos((R - P) / R)

    где:
    L - искомая длина дуги
    R - радиус окружности, равен половине диаметра, который равен стороне описывающего квадрата
    P - высота от нижней точки круга

    для указанных на рисунке чисел:
    P = 25 см
    R = 100 см / 2 = 50 см
    L = π * 50 см * acos((50 см - 25 см) / 50 см) = π * 50 см * acos(0.5) = 164.49 см (примерно)
    Ответ написан
    2 комментария
  • Что не так с кодом js?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Что не так с кодом js?
    он некорректный с самой первой строки...

    // тут очевидно было пропущено объявление переменной куда сохраняем полученный из DOM canvas
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    // вангую, что тут не объявленные переменные, и их нужно объявить
    var x = 0;
    var y = 0;
    var x1 = 0;
    var y1 = 0;
    var g = 4;
    var b = 7;
    
    // тут норм, но все же стоит включить себе линтер
    // ибо порядок в коде == порядок в голове
    var ground1 = new Image();
    ground1.src = "Ground.png";
    var pick1 = new Image();
    pick1.src = "Pick.png";
    
    // а вот в функции draw началась полная дичь...
    function draw() {
      ctx.clearRect(0,0,316,632); // очистку перенес внутрь функции отрисовки
    
      // тут я вырезал addEventListener - ибо добавлять нового подписчика на каждой отрисовке - дичь полнейшая
      // пристрелите того, кто Вас этому научил, так Вы сделаете этот мир лучше
    
      if(g < b) {
        ctx.drawImage(ground1, x, y);
        x+=32;
        if(x-32 > 290){
          x = 0;
          y+=32;
        }
        if(y-32 > 578){
          y = 0;
          x = 0;
        }
      }
    
      // я так думаю эту картинку надо рисовать после фона
      ctx.drawImage(pick1, x1, y1);
    
      requestAnimationFrame(draw); //зациклим анимацию
    }
    
    // анимировать что-то по таймеру плохая затея, есть более подходящие инструменты
    requestAnimationFrame(draw);
    
    // подписку на событие клавиатуры вынес из отрисовки
    // а саму отрисовку выкинул из обработчика
    // его дело переменные пересчитывать, а рисовать будет draw
    document.addEventListener("keydown", function pick(e) {
      if(e.keyCode == 87){
        y1-=32;
      }
      if(e.keyCode == 65){
        x1-=32;
      }
      if(e.keyCode == 83){
        y1+=32;
      }
      if(e.keyCode == 68){
        x1+=32;
      }
    });

    по хорошему надо еще, чтоб цифры от времени зависели, ибо requestAnimationFrame будет вызывать вкфц с частотой соответствующей доступному FPS
    Ответ написан
    Комментировать
  • Как в webpack организовать красивую сборку(прогрессбар и прочее)?

    bingo347
    @bingo347
    Crazy on performance...
    Ну во-первых, у Вас 3 процесса параллельно работают и выкидывают все в общий stdout, естественно там будет каша...
    Во-вторых, вот тут устаревший плагин, не знаю есть ли новый, но все же:
    (node:13579) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    10% building 0/1 modules 1 active ...aravel-vue/resources/js/entry-server.js 10% building 0/0 modules 0 active
    webpack is watching the files…


    Итак, для начала запустим 2 сборки в одном процессе, а заодно и перехватим управление компиляцией, дабы прогресс рисовать
    для этого создадим файл watch-run.js
    const webpack = require('webpack')
    const ProgressBarPlugin = require('progress-bar-webpack-plugin');
    
    //создадим мультикомпилер из наших конфигов:
    const compiler = webpack([
      require('./webpack.config.js'),
      require('./webpack.server.config.js')
    ]);
    
    //создадим прогресс плагин и скормим ему компилер
    new ProgressBarPlugin({
      // тут конфиг для прогресса
    }).apply(compiler);

    дальше есть два варианта действий:
    1. если наш сервер на базе express, то все просто - оборачиваем наш компилер в webpack-dev-middleware и скармливаем все это в express - и работать будет, и запросы на производное билда будет задерживать на время компиляции, разве что поконфигурировать мидлварь, чтоб меньше логов писал
    2. watch запускаем ручками

    с 1 вариантом все просто, весь файл server.js обернем в экспортируемую функцию, дабы можно было отдать в него компилер:
    module.exports = compiler => {
      // тут в основном будет Ваш код, но с некоторыми добавлениями
    
      // во-первых, подключим мидлварь там где подключаем остальные модули
      const devMiddleware = require('webpack-dev-middleware');
    
      // ну и где нить его отдадим экспресу
      // если server.js где то может без webpack запускаться,
      // то стоит обернуть это в if(compiler) {   }
      app.use(devMiddleware(compiler));
    
      // и опять же, если server.js где то может без webpack запускаться
      // то нужно как то запускать данную функцию если ее никто не запустит
      // добавим переменную флаг, чтоб это отслеживать
      isRunned = true;
    };
    
    //  а объявим наш флаг вне функции
    let isRunned = false;
    //ну и если по nextTick она еще не была запущена, то запустим
    process.nextTick(() => isRunned || module.exports());

    в watch-run.js останется добавить всего 1 строку:require('./server.js')(compiler);

    со 2 вариантом не намного сложнее, просто добавим в watch-run.js:
    // запустим компилер в режиме watch:
    compiler.watch(err => {
      if(err) console.error(err);
    });
    
    // и подключим server.js (на этот раз можно без его изменения)
    require('./server.js')


    все, осталось в start скрипт прописать:
    cross-env NODE_ENV=development node watch-run.js
    Ответ написан
    Комментировать
  • SetImmediate срабатывает до коллбэка. Почему?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    process.nextTick - выполняется в ближайший микротаск (в данном случае будет на текущей итерации event-loop, сразу после всех синхронных действий)
    setImmediate - сразу кидает функцию в конец очереди event-loop
    fs.open - сначала дождется завершения IO операции, и только потом окажется в очереди event-loop

    теоретически IO операция может завершится раньше вызова setImmediate, тогда колбэк fs.open вызовется раньше, так как попал в очередь раньше
    но чаще всего раньше все же будет setImmediate
    Ответ написан
  • Насколько сильно снижается производительность node.js при запуске его через php функцию exec()?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    time node -p '(process.memoryUsage().heapUsed/1048576).toFixed(2)+"M"'
    запускаем на своем сервере и любуемся оверхедом от запуска голой ноды...
    у меня (нода v10.15.3) вот так:
    3.71M
    
    real	0m0,076s
    user	0m0,064s
    sys	0m0,012s


    теперь давайте добавим сюда работу vue-ssr, который не просто так рекомендует прикручивать кэш...

    вообщем думайте сами, насколько для Вас оверхед ждать 100-200мс и тратить по ~5МБ на заопрос
    Ответ написан
    Комментировать
  • Как сделать десктопное приложение на JS с вызовом кода на php?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    electronjs.org - пишем десктоп на html+css+js
    https://nodejs.org/dist/latest-v10.x/docs/api/chil... или https://nodejs.org/dist/latest-v10.x/docs/api/chil... - для запуска php скрипта из node/electron

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

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    копайте в сторону ServiceWorker
    он живет независимо от страниц сайта, но может сдохнуть сам примерно через минуту, если его никто не дергает, что спокойно обходится с помощью postMessage при наличии хотя бы одной живой страницы
    Ответ написан
    Комментировать
  • Требуется совет по разрешению дилеммы интеграции Linux в Winodws, как быть?

    bingo347
    @bingo347
    Crazy on performance...
    Я как то уже писал на хабр статью, про мое использование WSL
    https://habr.com/ru/post/412633/
    используя я его с GUI (Xfce) и норм терминалом

    так же для себя писал хелпер на шарпе (хост) + ноде (WSL), для автоматическим рулением vcxsrv (X сервер под винду), WSL, а так же прокидыванием системной раскладки в WSL
    https://github.com/bingo347/XHelper

    ну и еще добавлю, что перешел сейчас на debian (когда писалась статья его еще не было в сторе), в нем изначально меньше мусора под снос
    впринципе все тоже самое можно провернуть и с виртуалкой
    а у virtualbox еще есть режим интеграции рабочего стола
    Ответ написан
    1 комментарий
  • Как можно улучшить этот код?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    class Pizza {
        constructor() {
            this.crust = prompt('Choose your crust: ');
            this.toppingsCount = +prompt('How many toppings do you want?') || 0;
            this.toppings = [];
        }
    
        makeToppings() {
            const {toppings, toppingsCount} = this;
            for(let i = toppingsCount; i--;) {
                toppings.push(prompt('Choose your topping: '));
            }
        }
    
        makePizza() {
            const {crust, toppings} = this;
            return `Your order is done! You choose ${crust} crust with these toppings: ${toppings.length ? toppings.join(', ') : 'nothing'}`;
        }
    }
    
    let personalPizza = new Pizza();
    personalPizza.makeTopping();
    console.log(personalPizza.makePizza());
    Ответ написан
    1 комментарий
  • Возможно ли совместить однофайловые компоненты vue с кодом php?

    bingo347
    @bingo347
    Crazy on performance...
    https://vue-loader.vuejs.org/guide/custom-blocks.h...
    + написать webpack-loader который соберет весь php код со всех файлов и заменит их например на url генерируемого апи
    + написать webpack-plugin который по emit tap закинет все собранное лоадером в какой нить php файлик для бэка

    но как уже писали выше, подумайте, а стоит ли оно таких усилий
    Ответ написан
    Комментировать
  • Почему не воспроизводится звук через Web Audio API?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    У Вас ожидается полная загрузка файла, прежде чем отдать его на воспроизведение, файл очень большой для mp3 и отдается с весьма маленькой скоростью (за 6 минут у меня загрузилось 2.8МБ на инете 100мб/с и файл на этом не закончился).
    Вообще создается ощущение, что там стрим, а не просто файл, тогда ждать воспроизведения Вы будете вообще вечно.
    Вам нужно забирать данные по частям, небольшими порциями и каждую порцию отдавать в sourceBuffer, но не раньше, чем закончится декодинг предыдущей части (очереди в помощь)
    Ответ написан
  • Как получить массив id отмеченных чекбоксов?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    const ids = Array.from(element.querySelectorAll('input[type="checkbox"]:checked'), el => el.id);
    Ответ написан
    Комментировать
  • Как вырезать тег, оставив его содержимое?

    bingo347
    @bingo347
    Crazy on performance...
    /(.+)<span.*?>(.*)<\/span>(.+)/
    https://regex101.com/r/tAAY5r/2
    Ответ написан
    Комментировать
  • Как закрыть connect через net.createConnection?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    метод end всего лишь посылает FIN пакет, соединение будет закрыто, когда другая сторона так же пришлет FIN пакет.
    для обрыва соединения в одностороннем порядке (ничего не посылая другой стороне) есть метод destroy
    https://nodejs.org/dist/latest-v10.x/docs/api/net....
    Ответ написан
    Комментировать
  • Как сделать такую прокрутку по сайту?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Комментировать
  • Какой лучший (красивый и короткий) способ проверки на undefined свойства в объекте javascript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Не сочтите за саморекламу, но https://www.npmjs.com/package/@bingo347/fn

    import chain from '@bingo347/fn/mappers/chain';
    import extractField from '@bingo347/fn/mappers/extractField';
    
    // создаем функцию для безопасного извлечения
    const getBCDE = chain(
      extractField('B'),
      extractField('C'),
      extractField('D'),
      extractField('E')
    );
    
    // извлекаем
    const ABCDE = getBCDE(A);
    Ответ написан
    Комментировать