• Как редактировать сайт на VPS с серверной операционной системой?

    bingo347
    @bingo347
    Crazy on performance...
    Хотя Сергей Горностаев уже предложил самый разумный ответ, просто замечу, что в последней версии VSCode есть удаленное редактирование через ssh
    А кроме того есть CLI редакторы вроде vim
    Ответ написан
  • Как правильно упростить запись в блоке for?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    for(let  i = Math.sign(number) || 1; Math.abs(i) < Math.abs(number); i += Math.sign(number) || 1) {
      // ...
    }
    Ответ написан
  • Как написать простой ajax запрос на nodejs?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Низкоуровневое апи: https://nodejs.org/dist/latest-v12.x/docs/api/http...
    fetch (как в браузере): https://www.npmjs.com/package/node-fetch
    axios предложили уже выше, но на мой взгляд единственный его + в универсальности (с чем fetch как по мне лучше справляется), зато из минусов - тяжелый, тормазной...
    Ну и наконец request - очень хорошая абстракция над низкоуровневым апи ноды - https://www.npmjs.com/package/request - из минусов - нет промисов из коробки
    Ответ написан
    Комментировать
  • Как связать div с данными?

    bingo347
    @bingo347
    Crazy on performance...
    <div contenteditable ref="dataElem" />
    props: ['value'],
    mount() {
        this.$nextTick(() => {
            this.$refs.dataElem.innerHTML = this.value;
        });
    },
    Ответ написан
    Комментировать
  • Как найти уникальные значения именно с помощью метода .find?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Например так:
    [1,2,3,1,2,3,4,0,-1].filter(function(el) {
      return !this.find(el2 => el === el2) && (this.push(el), true);
    }, [])
    Ответ написан
    Комментировать
  • Blob возвращает пустое изображение, как решить?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Отрисовка на канвасе идет после загрузки изображения
    А запрос на извлечение блоба идет до загрузки изображения и следовательно до отрисовки его на канвасе
    parent.querySelectorAll('.gallery-uploads-imgs__item').forEach(element => {
              var img = new Image;
              img.src = element.dataset.src
              document.body.append(img)
    
    
    
              let canvas = document.createElement('canvas')
              let context = canvas.getContext('2d');
              canvas.width = img.clientWidth
              canvas.height = img.clientHeight
    
    
              img.onload = function() {
                context.drawImage(img, 0,0);
                img.remove();
                canvas.toBlob(function(blob) {
                  let uploadImageUrl = URL.createObjectURL(blob);
    
                  data.blobs.push( uploadImageUrl )
    
                }, 'image/png');
              }    
            })


    P.S. вангую следующий вопрос будет в стиле data.blobs пустой...
    Ответ написан
  • Как добавить циклом for в пустой массив элементы - числа от 4 до 400, а потом уже когда в массиве будут эти элементы вывести их на экран?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    И вообще какие еще варианты могут быть решения этой задачи? Кроме цикла for? Несмотря на то что в задании пишет именно с помощью него решить задачу. Просто для себя чтобы знать другие варианты.
    document.getElementById('root').appendChild(
      document.createTextNode(
        Array.from(new Array(401), (_, i) => i).slice(4).join(' ')
      )
    );
    Ответ написан
    Комментировать
  • Как сделать что-бы webpack делил порт с node.js?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Сам webpack никаких портов не слушает, он просто собирает Ваше приложение из много файлов в мало файлов, сеть ему для этого не нужна.
    Сеть может слушать webpack-dev-server, который просто является оберткой над express + webpack-dev-middleware.

    Так что никто Вам не мешает самому запустить express и засунуть в него webpack-dev-middleware, получив тот же эффект + расширяемость express приложения

    А при желании избавится и от express, Вам достаточно будет сэмулировать next колбэк и можете передавать в мидлвар нативные request и response из http модуля
    Ответ написан
    Комментировать
  • Как передать параметры в функцию при её импорте?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    import logBuilder from "./logs/logger";
    const log = logBuilder(import.meta);

    вот только в es-модулях нет предобъявленной переменной module, которая создается окружением commonjs модулей, но наверняка билдеру нужны метаданные, которые можно получить из import.meta
    Ответ написан
    Комментировать
  • Как извлечь три ветви JSON?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    response.items[0].id
    у Вас items - массив, в котором уже лежит объект с полем id
    Ответ написан
    3 комментария
  • Как присвоить объект по значению, а не по ссылке?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вам определенно нужен deepClone
    Можно взять готовый например из lodash, но я бы предложил Вам свою реализацию.
    Пока писал ее в ответ, понял, что в очередной раз мой ответ превращается в целую статью, поэтому разместил ее на хабре: https://habr.com/ru/post/466535/

    Ну или можете просто скопировать код и использовать:
    function deepClone(source) {
    	return ({
    		'object': cloneObject,
    		'function': cloneFunction
    	}[typeof source] || clonePrimitive)(source)();
    }
    
    function cloneObject(source) {
    	return (Array.isArray(source)
    		? () => source.map(deepClone)
    		: clonePrototype(source, cloneFields(source, simpleFunctor({})))
    	);
    }
    
    function cloneFunction(source) {
    	return cloneFields(source, simpleFunctor(function() {
    		return source.apply(this, arguments);
    	}));
    }
    
    function clonePrimitive(source) {
    	return () => source;
    }
    
    function simpleFunctor(value) {
    	return mapper => mapper ? simpleFunctor(mapper(value)) : value;
    }
    
    function makeCloneFieldReducer(source) {
    	return (destinationFunctor, field) => {
    		const descriptor = Object.getOwnPropertyDescriptor(source, field);
    		return destinationFunctor(destination => Object.defineProperty(destination, field, 'value' in descriptor ? {
    			...descriptor,
    			value: deepClone(descriptor.value)
    		} : descriptor));
    	};
    }
    
    function cloneFields(source, destinationFunctor) {
    	return (Object.getOwnPropertyNames(source)
    		.concat(Object.getOwnPropertySymbols(source))
    		.reduce(makeCloneFieldReducer(source), destinationFunctor)
    	);
    }
    
    function clonePrototype(source, destinationFunctor) {
    	return destinationFunctor(destination => Object.setPrototypeOf(destination, Object.getPrototypeOf(source)));
    }
    Ответ написан
    Комментировать
  • Можно ли отловить событие из vue компонента в нативном js?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    import Vue from 'vue';
    import Component from './Component.vue';
    
    const component = new Vue(Component).$mount('selector');
    component.$on('event-name', () => console.log('wow'));
    Ответ написан
    9 комментариев
  • Как изменить стили через javascript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    var el = document.querySelector("a[href='/products/962112']"); // в селекторе хардкод... не будет ссылки с таким href - все сломается
    
    // тут был цикл, но я его убрал, ибо один элемент берем
    
    var products = document.getElementsByClassName('product'); // тут коллекция, ее надо перебирать циклом
    for(var i = 0; i < products.length; i++) {
      products[i].style.height = el.style.height;
    }


    UPD: по просьбе origami1024 добавляю вариант с CSSOM
    Во-первых, нам понадобится новый элемент style, чей CSSOM мы будем править, его стоит разместить ниже других стилевых подключений (не важно через style или link), я же просто добавлю в конец head
    Сам CSSOM элемента style доступен через его свойство sheet - извлеку его сразу в переменную:
    const {sheet} = document.head.appendChild(document.createElement('style'));

    Во-вторых, в CSSOM правила пронумерованы с 0. Притом можно заменять существующие правила по их индексу, а можно вставлять новые в конец (индекс при этом так же нужно указывать, а если указать неверно - выкинет эксэпшн). Нам же удобнее обращаться к правилам по селектору, поэтому я сделаю объект для сопоставления селектора с индексом правила и счетчик индексов:
    const rulesIndexesBySelector = {};
    let nextIndex = 0;

    Ну и наконец реализуем вспомогательную функцию для обновления CSSOM правила по его селектору:
    function updateRule(selector, declarations) {
      const rule = `${selector}{${declarations}}`; // полное правило - селектор + декларации в {}
      if(selector in rulesIndexesBySelector) {
        // индекс селектора уже известен, обновим правило
        const index = rulesIndexesBySelector[selector];
        sheet.deleteRule(index); // сначала удалим старое правило освободив индекс и отменив его свойства
        sheet.insertRule(rule, index); // и вставим на его место новое
      } else {
        // новый селектор
        const index = nextIndex++; // важен именно постинкримент, чтоб самый первый получил 0, второй 1 и т.д.
        rulesIndexesBySelector[selector] = index; // запомним на будущее
        sheet.insertRule(rule, index); // и вставим правило в конец
      }
    }

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

    Использовать это все теперь можно крайне просто:
    updateRule('.product', 'height: 40px; width: 50px');
    Ответ написан
    5 комментариев
  • Как удалить внешний блок?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    const elem = document.querySelector('.one');
    const frag = document.createDocumentFragment();
    for(const child of elem.childNodes) {
      frag.appendChild(child);
    }
    elem.parentElement.replaceChild(frag, elem);
    Ответ написан
  • Как вызвать функцию через 5 секунд после клика?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Функция up должна корректно решать поставленную задачу
    Скорее всего проблема в обработчике события.
    Атрибуты вроде onclick работают только с глобальным контекстом, лучше их не использовать

    Правильнее выбрать input из DOM (например с помощью document.querySelector) и навешать обработчик через метод элемента addEventListener

    Так же важно помнить, что выбор элемента нужно делать после того, как он появится на странице, лучше всего для этих целей подходит событие DOMContentLoaded у document:
    document.addEventListener('DOMContentLoaded', function() {
      // здесь спокойно можем делать document.querySelector
    });
    Ответ написан
    Комментировать
  • Тратит ли функция cb = ( e ) => e ресурсы на вычисления?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В общем случае да - как минимум на создания контекста вызова, но после оптимизации может и не тратить, identity функция (функция просто возвращающая свой аргумент, как Ваш cb) хорошо инлайнится, тут вопрос в том - инлайнится ли функция, в которую Вы ее передаете.

    Для понимания, нужно понимать, что v8 делает с кодом под капотом:
    Когда платформа (браузер, node.js) только загрузила исходный код в v8, то выполняет его с помощью интерпретатора Ignition, а заодно анализирует это выполнение. На этом этапе весь код выполняется как есть.
    Функции которые вызвались 2-3 раза отправляются в оптимизирующий JIT компилятор TurboFan, который скомпилирует из JS машинный код и сделает множество оптимизаций. В частности он может инлайнить некоторые функции (но не все).
    Например, если при анализе кода выяснится, что некая функция f0 постоянно вызывает f1 передавая ей Ваш cb, и при этом f1 чистая функция - то f1 скорее всего заинлайнится в f0, а вызов cb просто заменится на свой аргумент. Но опять же, все зависит от Вашего кода и на сколько он оптимизируемый.

    В любом случае identity функция очень легкая
    Ответ написан
    4 комментария
  • Как ограничить тип T примитивными типами f32 и f64?

    bingo347
    @bingo347
    Crazy on performance...
    Ограничить дженерик-тип можно только типажами (traits).
    Что Вы хотите сделать? Какие методы f32 и f64 Вам нужны?
    Возможно данные методы уже реализованы в типажах стандартной библиотеки - тогда нужно ограничивать их суммой.

    Другой вариант, сделать свой типаж, ограничить дженерик тип им, имплементировать этот типаж для f32 и f64
    Имплементация должна представлять обертки над нужными действиями

    UPD: если нужно ограничение дженерик, на использование метода exp у f32 и f64:
    Типаж-контракт на метод exp:
    trait Exp {
        fn exp(self) -> Self;
    }
    
    impl Exp for f32 {
        fn exp(self) -> Self {
            <f32>::exp(self)
        }
    }
    
    impl Exp for f64 {
        fn exp(self) -> Self {
            <f64>::exp(self)
        }
    }


    так же можно воспользоваться следующим крэйтом:
    https://crates.io/crates/num
    Ответ написан
    2 комментария
  • Какие языки используют для создания приложений?

    bingo347
    @bingo347
    Crazy on performance...
    ОС чаще всего пишут на низкоуровневых языках, вроде C (Linux, FreeBSD), C++ (Windows), Rust (Redox). Иногда используют ассемблерные вставки.

    Игры (имеются в виду 3D игры) чаще всего пишут на C++, но так же возможно на C# (Unity), JS (Unity или что-то упрощающее работу с WebGL). Хотя могут быть и другие языки (например майнкрафт написан на JAVA, а старый добрый Doom - на C). Так же понадобится язык шейдеров для программирования видеокарты, например для OpenGL и WebGL таким языком является GLSL.

    Прикладной софт вообще пишется на чем угодно, выбор языка зависит от задачи. Но в некоторых сферах все же можно выделить лидеров:
    Энтерпрайз решения - Java EE, реже C#
    Десктопный софт под Windows - C# (реже другие языки .net платформы)
    Десктопный софт под MacOS - Swift
    Десктопный софт кросплатформенный - Java, Python, JS (Electron)
    Мобильный софт под Андроид - Kotlin, Java
    Мобильный софт под iOS - Swift
    Мобильный софт кросплатформенный - C# (Xamarin), JS (Cordova, ReactNative, etc.)
    Серверный софт - php, Python, Ruby, JS (node), Java, Go, Rust, ... вариантов много
    Браузерный софт - JS или то что компилится в JS (чаще TypeScript)
    Ответ написан
    11 комментариев
  • Как контролировать количество табов в puppeteer?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    const PARES_CONCURENCY = 10; // сколько вкладок открываем за раз
    runURLs([
      'https://site.com/url1',
      'https://site.com/url2',
      'https://site.com/url3',
      'https://site.com/url4'
      // ...
    ]).then(() => console.log('Готово!'));
    
    async function runURLs(urls) {
      const browser = await puppeteer.launch();
      const tasks = urls.map(url => async () => {
        const page = await browser.newPage();
        await page.goto(url);
        // делаем что-то со страницей
        await page.close();
      });
      const queue = tasks.slice(PARES_CONCURENCY)[Symbol.iterator]();
      const runNextTask = () => {
        const {value, done} = queue.next();
        if(done) { return; }
        return value().then(runNextTask);
      };
      await Promise.all(tasks.slice(0, PARES_CONCURENCY).map(task => task().then(runNextTask)));
      await browser.close();
    }
    Ответ написан
    Комментировать
  • Как прослушать звуковой файл, получить текст и сравнить его с предоставленным текстом и нажать на определённую кнопку на JS?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    2. https://cloud.yandex.ru/services/speechkit
    3. точно не распознает, поэтому гуглим расстояние Левинштейна
    насчет нажать кнопку - не проще функцию вызвать напрямую?
    Ответ написан
    3 комментария