Задать вопрос
  • Как получить составляющий процент из объекта по полю?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Решил немного оптимизировать + унифицировать решение предложенное @mourr
    function countFieldPersent(arr, field) {
        var data = arr.reduce((r, item) => {
            var value = String(item[field]);
            if(typeof r[value] === 'undefined') {
                r[value] = 0;
            }
            return ++r[value], r;
        }, {});
        return Object.getOwnPropertyNames(data).map(label => ({
            label,
            value : (data[label] * 100) / arr.length
        }));
    }
    
    var arr = [{ FirstName: 'Pavel',      LastName: 'Pavlol',  Phone: '1234567',  Gender:'male' },
    { FirstName: 'Ivan', 	     LastName: 'Ivanov', Phone: '1234567',  Gender:'female' }];
    var result = countFieldPersent(arr, 'Gender');
    Правда в моем варианте значения будут сравниваться как строки, так как я их перевожу в ключи объекта data
    Ответ написан
    Комментировать
  • Как индексируется в поисковиках one page app сайты?

    bingo347
    @bingo347
    Crazy on performance...
    Дополню ответ выше пояснениями и примерами
    Сервер для любой страницы должен уметь присылать ответ как в виде готовой html так и в виде данных для генерации данного html на клиенте, соответственно понадобится шаблонизатор способный работать как на клиенте, так и на сервере.
    Такой сайт спокойно смогут просматривать поисковики, а так же браузеры с отключенным javascript, а когда все норм (js работает) мы получили готовую страницу при первом запросе, а дальше работаем по принципу SPA для последующих переходов между страницами.
    Второй важный момент, поисковики ищут внутренние страницы сайта переходя по ссылкам <a href="/page2">Page 2</a>. Соответственно наше SPA должен запускать свой роутинг перехватывая клики по ссылкам и основываясь на атрибуте href кликнутой ссылки
    Третий момент, придется позаботится о historyAPI для удобства пользователя.

    Ну и на последок, как я это все реализовал у себя на сайте
    У меня есть пачка шаблонов описывающих содержимое страниц, они работают как на сервере так и на клиенте
    Есть один базовый шаблон, задающий структуру html документа, он работает только на сервере.
    По запросу определенной страницы, сервер собирает из шаблонов полноценный html и отдает его браузеру, вот так: https://d-belyaev.ru/
    Браузер ищет все теги a на странице и вешает на них обработчик click:
    function render(node) {
        var links = node.getElementsByTagName('a');
        for(let i = links.length; i--;) {
            links[i].addEventListener('click', doLinkClick);
        }
    }
    
    function doLinkClick(event) {
        var href = event.target.getAttribute('href');
        if(!href.startsWith('/')) return true;
        event.preventDefault();
        router(href);
    }

    Роутер по данному href отправляет ajax запрос на сервер, дописывая к нему ?json
    На что сервер уже отвечает по другому: https://d-belyaev.ru/?json
    А реализовано это все вот таким роутом на сервере:
    function indexRoute(request) {
        var pageData = {
            template : 'page-index',
            activeMenuIndex : 0
        };
        if(request.url.query === 'json') {
            request.json(pageData);
        } else {
            request.html(baseTemplate(pageData));
        }
    }

    Правда в нем у меня пока не хватает обработки для 304 статуса (страница в кэше браузера), так как руки пока не дошли
    Ответ написан
    6 комментариев
  • Можно ли задать css стили элементу массива?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В Вашем примере элементы массива - просто числа и никакого отношения к dom и соответственно к css они не имеют, задать css класс можно только для dom элемента через свойство classList
    node.classList.add('class') - добавляет
    node.classList.remove('class') - удаляет
    node.classList.contains('class') - проверка наличия
    Если из массива генерируется html то там вообще просто, дописывайте по условию атрибут class к нужному тегу

    Ну а проверить нечетность n можно таким условием: if(n % 2)
    Ответ написан
    3 комментария
  • Стилизация мини-аудио плеера. Как быть?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    тык
    вполне себе доступное описание апи тега audio
    Ответ написан
    Комментировать
  • Как сделать роутинг доменов в nodejs на VDS?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    запрошеный хост передается в заголовке запроса Host
    все веб-серверы ориентируются именно по этому заголовку.
    Вот простой пример с express:
    var http = require('http');
    var express = require('express');
    var site1App = express();
    var site2App = express();
    
    var site1Req = site1App();
    var site2Req = site2App();
    var server = http.createServer((req, res) => {
        switch(req.headers.host) {
            case 'site1.ru':
            case 'www.site1.ru':
                site1Req(req, res);
                break;
            case 'site2.ru':
            case 'www.site2.ru':
                site2Req(req, res);
                break;
            default:
                //unknown host
                res.writeHead(404);
                res.end();
        }
    });
    server.listen(80);
    Ответ написан
    1 комментарий
  • Есть ли скрипт который даст смотреть HLS видео в стандартных плеерах браузеров?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ответ написан
    Комментировать
  • Источники для изучения Node.js?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Полная документация по апи node.js всегда есть на оф. сайте, при том там можно найти документацию под различные версии
    К модулям устанавливаемым через npm как правило есть readme
    Все остальное - это нативный js, с которого и следует начать изучение, например по этой книге
    Ответ написан
    Комментировать
  • Как реализовать загрузку файла через форму с помощью JS?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Посмотрите в сторону FileApi
    Ответ написан
    Комментировать
  • Почему элемент игнорируется?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    getElementsByClassName возвращает nodeList, который обновляется при изменениях в dom
    Допустим у Вас выделено 3 элемента, их индексы в nodeList 0, 1 и 2
    Вы перебираете их циклом for(var i = 0; i < selected.length; i++)
    На первой итерации цикла Вы убираете класс у 0 элемента, при этом он так же исчезает из nodeList, который сформирован по этому классу, 1й элемент становится нулевым, 2й - первым, length становится 2
    На второй итерации Вы убираете класс у элемента с индексом 1, который изначально был 2, nodeList опять обновляется
    Третьей итерации уже не происходит, так как i == 2, а selected.length == 1, цикл завершается.
    Оптимальнее, как в плане производительности, так и в плане правильной логики перебирать nodeList d обратном порядке, так элемент будет удаляться с конца nodeList - что быстрее, а у необработанных элементов останутся прежние индексы
    for(var i = selected.length; i--; ){
            selected[i].classList.remove('selected');
    }
    Ответ написан
    2 комментария
  • Как добавить класс во многоуровневом списке?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Попробуйте такую функцию:
    function setSelected(topUL) {
        var top = typeof topUL === 'string' ? document.querySelector(topUL) : topUL;
        var selected = top.querySelectorAll('li.selected');
        for(var i = selected.length; i--;) {
            var current = selected[i];
            while(current !== top) {
                current = current.parentNode;
                if(current.nodeName === 'LI') {
                    current.classList.add('selected');
                }
            }
        }
    }
    на вход принимает селектор или domNode самого верхнего <ul> в дереве
    Ответ написан
    Комментировать
  • Как в Node JS pm2 сделать глобальную переменную в cluster mode?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Каждый экземпляр - это отдельный процесс со своей памятью.
    Посмотрите в сторону redis
    Ответ написан
    Комментировать
  • Какие методы более предпочтительны для работы с двоичными числами?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    js "понимает" 3 системы счисления:
    • 10 - числа пишутся в коде как обычно
    • 16 - числа начинаются с 0x
    • 8 - числа начинаются с 0
    Соответственно в Вашем примере число обрабатывается как восьмиричное

    Number.prototype.toString() сериализует число в строку в любой СС с 2 по 36, но на выходе будет строка, для десириализации можно использовать 2й аргумент у функций parseInt, например так: parseInt('00000000000000000000000011111111', 2)
    Как работать с отдельными битами числа Вы уже нашли в учебнике, так что расписывать не буду.

    p.s. Часто бывает нужно заполнить двоичные константы, чтобы их удобно было передавать через CONST1 & CONST2. Я для таких целей использую такой генератор:
    function* iota() {
        var i = 1;
        while(true) {
            yield i;
            i *= 2;
        }
    }
    Ответ написан
  • Почему при post запросе ругается браузер?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Некоторые браузеры неадекватно воспринимают звездочку в Access-Control-Allow-Origin
    Пропишите конкретный хост в этот заголовок или подставляйте его из req.headers.host чтобы принимать любой хост.
    Так же можно попробовать midleware cors
    Ответ написан
    Комментировать
  • Стоит ли использовать setImmediate / nextTick в Express?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Просто оборачивание тяжелой операции в setImmediate большого профита не даст, Вы все равно блокируете поток на время ее выполнения.
    А вот разбить ее на небольшие быстрые части с помощью setImmediate можно, сам midleware будет отрабатывать чуть медленнее, зато EventLoop будет отрабатывать.
    В большинстве случаев адекватно прерывать задачу на обработку EventLoop каждые 1000 итераций цикла, хотя конкретное число итераций зависит от вычислительной сложности тела цикла в Вашем случае.
    Ответ написан
    Комментировать
  • Как сделать, что бы при наведении на обьект проигровался звук?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    во-первых, jquery не подключен к странице
    во-вторых, когда выполняется этот скрипт:
    var myaudio = $("#myaudio")[0];$("#myblock a").mouseenter(function(){myaudio.play();});
    искомых элементов еще нет на странице, нужно так:
    $(function() {
        var myaudio = $("#myaudio")[0];
        $("#myblock a").mouseenter(function(){myaudio.play();});
    });
    Ответ написан
    Комментировать
  • JS Как имея название параметра внутри объекта найти его(просмотрев все вложенные объекты) и!!! получить к нему путь?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Хотя вопрос больше похож на "сделайте все за меня", сама задачка показалась мне интересной, вот решение:
    function findParamPath(obj, prop) {
        if(obj.hasOwnProperty(prop)) return prop;
        var props = Object.getOwnPropertyNames(obj);
        for(var i = props.length; i--; ) {
            if(typeof obj[props[i]] !== 'object') continue;
            var path = findParamPath(obj[props[i]], prop);
            if(path) return props[i] + '.' + path;
        }
        return null;
    }


    тестим:
    var obj = {
        object : {
            client : {
                name : 'Вася',
                phone : '799999999'
            },
            order : {
                param1 : '2122',
                param2 : '1231'
            }
        }
    };
    
    console.log(findParamPath(obj, 'name')); // 'object.client.name'
    console.log(findParamPath(obj, 'param1')); // 'object.order.param1'
    console.log(findParamPath(obj, 'unknown')); // null (не найдено)
    Ответ написан
  • Как настроить компиляцию SASS через SSH?

    bingo347
    @bingo347
    Crazy on performance...
    Вам нужно собрать свой docker-image на базе того, что Вы используете, с установленным туда руби и сасс (либо поискать готовый под эти цели)
    А свой контейнер уже создавайте на базе этого образа
    Ответ написан
    Комментировать
  • Как бороться с DDOS атаками на node?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Примерно так:
    var http = require('http');
    var ipTables = {};
    
    var server = http.createServer((req, res) => {
        //Ваш обработчик запроса или express/connect вместо него
    });
    
    server.on('connection', socket => {
        var ip = socket.address().address;
        var time = Date.now();
        if(ip in ipTables) {
            if(time - ipTables[ip].time > 3000) {
                ipTables[ip] = {
                    count : 1,
                    time
                };
                return;
            }
            ipTables[ip].count++;
            ipTables[ip].time = time;
            if(ipTables[ip].count > 100) {
                socket.end('HTTP/1.1 429 Too Many Requests\n\n');
                socket.destroy(); //Обрываем соеденение, так как ip ломится слишком часто
            }
            return;
        }
        ipTables[ip] = {
            count : 1,
            time
        };
    });
    
    server.listen(80);
    Ответ написан
    Комментировать
  • Сменить тип тега?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    var spans = document.querySelectorAll('span[thref]');
    for(var i = 0, n = spans.length; i < n; i++) {
        var href = spans[i].getAttribute('thref');
        var inner = spans[i].innerHTML;
        spans[i].outerHTML = '<a href="' + href + '">' + inner + '</a>';
    }
    Ответ написан
    Комментировать
  • Как отследить передаваемые data всех ajax запросов на странице?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Uncaught ReferenceError: data is not defined

    data в этом случае вообще не объявленная переменная, без strict mode было бы значение undefined
    Ответ написан
    Комментировать