• Как пересчитать одинаковые элементы в массивах?

    @StiflerProger
    В любом случае, удобней уже в слитом сравнивать
    mainArr.reduce((acc, cur) => {
        if (!acc[cur]) acc[cur] = 0;
        acc[cur]++;
        return acc;
    }, {})
    Ответ написан
    9 комментариев
  • Как пересчитать одинаковые элементы в массивах?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Создать объект (словарь) где ключи – элементы массивов, а значения – число, сколько раз встретились.
    const counter = {};
    
    // пройти по массиву, заполняя counter
    arr.forEach((el) => counter[el] = (counter[el] || 0) + 1);

    Получится что-то типа
    {
      555: 1,
      30167380: 2,
      496903611692199: 1,
      245970100361652: 2,
      711023259278888: 2
    }
    Ответ написан
    3 комментария
  • Встречались ли вам овер-инженеры среди джунов и миддлов? Как надо с такими поступать?

    DevMan
    @DevMan
    человек вообще ни у чом не уиноват.
    просто в компании не выстроены (или не правильно выстроены) бизнес-процессы.

    человек с горящими глазами и скилованный - офигенный актив. прост нужно этот энтузиазм направить в нужное русло. и это элементарно решается административными способами, если между собой разобраться не удаётся.
    Ответ написан
    10 комментариев
  • Как передать дженерик функции аргумент key типа keyof T и чтобы при этом же было T[key]: number?

    bingo347
    @bingo347 Куратор тега TypeScript
    Crazy on performance...
    type ChooseKeys<O, T> = {
        [K in keyof O]: O[K] extends T ? K : never;
    }[keyof O];
    
    // 'number' | 'alsoNumber'
    type Test1 = ChooseKeys<{
      number: number;
      alsoNumber: number;
      string: string;
      anotherString: string;
      bool: boolean;
    }, number>;
    
    // 'number' | 'alsoNumber' | 'bool'
    type Test2 = ChooseKeys<{
      number: number;
      alsoNumber: number;
      string: string;
      anotherString: string;
      bool: boolean;
    }, number | boolean>;
    Ответ написан
    Комментировать
  • Препроцессоры CSS, зачем их знать чтобы получить работу?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Потому что нанимают в команду, в которой приняты определённые технологии, инструменты и подходы. Нанимают, чтобы сотрудник делал ровно то, что от него хочет наниматель, а не то, что сотруднику нравится.
    Ответ написан
    4 комментария
  • Как выводить заглушку на сайте при отсутствии интернет соединения?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Ребята, это не пинг и не NavigatorOnLine, так делать нельзя, ибо пользователь может читать статью, а вы ему при потере интернета все обломаете. Такая плашка работает на сайтах, чей контент грузится по ajax, без перезагрузки страницы. Плашка должна показываться при неудачном ajax запросе получения страницы, и в идеальном случае, предлагать посмотреть оффлайн страницы (предварительно загруженные в хранилище). Если же сайт не ajax, можно при помощи того же NavigatorOnLine делать проверку, что если сайт в оффлайне, превентить переходы по ссылкам, и показывать эту плашку только в случае клика на ссылку.
    Ответ написан
    Комментировать
  • Как в VS Code проверить проект на типизацию TypeScript?

    bingo347
    @bingo347 Куратор тега TypeScript
    Crazy on performance...
    лишь ошибки типизации которые не мешают компиляции
    Если проект компилируется - то все типы сошлись. Если проект компилируется, а ошибка все таки есть - значит типы криво описаны.
    Как проверять все файлы проекта на правильность типизации?
    Скомпилировать проект.

    Но, если допустим, изменить какой-нибудь тип (интерфейс), а файл, который на него ссылается и использует будет закрыт, то ошибку никакую не выдаст.
    И это хорошо. Если TypeScript LSP будет перепроверять весь проект на каждый чих, а не только открытые файлы, то писать что-то сложнее todo листа будет невозможно...

    Знаю, существуют ESLint, TSLint.
    Они тоже для статического анализа, но для немного другого. В VSCode они так же чекают только открытые файлы, из тех же соображений производительности.
    TSLint устарел. ESLint ставьте отсюда: https://marketplace.visualstudio.com/items?itemNam...
    Ответ написан
    Комментировать
  • SQL инъекция в UPDATE возможна ли?

    FanatPHP
    @FanatPHP
    Чебуратор тега РНР
    Инъекция может быть через любой запрос.
    И защищать тоже надо любые запросы.
    Никогда не надо торговаться, "а можно я не буду защищать именно этот запрос? Ну мааааам!"
    Надо просто всегда следовать простым правилам - любая переменная попадает в запрос только через плейсхолдер

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

    Уязвимость — это сама возможность с помощью переданных в запрос данных изменить его код.
    Даже если ты не знаешь ни одного способа ей воспользоваться, уязвимость от этого никуда не девается.
    Даже если та возможность, про которую ты знаешь, в данном случае не прокатит - остаются ещё тысячи других.
    Если есть уязвимость, то способы ей воспользоваться всегда найдутся.

    То есть сама уязвимость никак не зависит ни от каких второстепенных факторов - типа запроса, передаваемых данных, способов их валидации, твоих знаний SQL. Это сам факт. Можно подставить свой код в запрос? Значит он уязвим. А как конкретно можно нагадить - это отдельная тема.

    Кроме того, любая уязвимость - это всегда ошибки. Если в $id будет пусто, то запрос вызовет ошибку. Если в $id будет слово select то запрос вызовет ошибку. Если будет слово "привет", то запрос вызовет ошибку. Оно тебе надо?

    При этом разных вариантов возможных ошибок и способов воспользоваться уязвимостью - тысячи, им посвящены целые учебники и статьи. Но для того чтобы защищаться, не надо знать ни одного. Потому что защищаться надо не от отдельных способов эксплуатации, а закрывать саму уязвимость. И сделать это очень просто:
    1. Любые данные должны добавляться в запрос только через плейсхолдеры
    2. Любые другие элементы запроса должны выбираться из белого списка - заранее прописанных в нашем коде значений.


    Если вопрос "а можно я не буду защищаться?" вызван ленью, то это тоже решаемо. В принципе, лень - это очень важное качество для программиста. Главное - направить её в нужное русло.

    Если каждый раз писать по три строчки долго
    $sql = "INSERT INTO users SET email = ?, password = ?"; // заменяем на знаки вопроса
    $stmt = $db->prepare($sql); // подготавливаем запрос, получаем stmt
    $stmt->bind_param("ss", $email, $hash); // два знака вопроса - две переменных - две буквы s
    $stmt->execute(); // выполняем запрос

    То надо воспользоваться такой вещью, как программирование. И написать функцию, которая возьмет на себя всю рутинную работу.
    function prepared_query($mysqli, $sql, $params, $types = "")
    {
        $types = $types ?: str_repeat("s", count($params));
        $stmt = $mysqli->prepare($sql);
        $stmt->bind_param($types, ...$params);
        $stmt->execute();
        return $stmt;
    }

    и в итоге предыдущие 4 строчки превратятся в одну:
    prepared_query($db, "INSERT INTO users SET email = ?, password = ?", [$email, $hash]);

    или твой запрос:
    prepared_query($db, "UPDATE table SET test WHERE id = ?", [$id]);

    - просто, быстро, удобно и безопасно
    Ответ написан
    26 комментариев
  • В чем превосходство Typescript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Как бы это странно не звучало, но одно из главных преимуществ TypeScript - это ускорение разработки в несколько раз. Да, когда еще ничего нет - разработка незначительно замедлится, так как помимо логики нужно описать еще и типы. Но это только в начале. И это не только возможность писать большую часть кода с помощью автодополнения. Поддержка существующего кода занимает в десятки раз больше времени, чем его начальное написание. Стоит ли вложить несколько лишних часов на старте, чтоб сэкономить в последствии месяцы? Как по мне стоит.

    Еще одним огромным плюсом является возможность проектировать на типах. Познав дзен TypeScript'а я перестал пользоваться UML, так как типы дают мне ту же наглядность, но при этом еще и сокращают время, так как типы - это уже код. Ну и источник правды остается один. Бизнес требования выраженные в типах не дают отклонится от них при написании логики, исключая возможность неправильной трактовки задачи. Перенеся задачу в типы, я могу обсудить ее с коллегами и исправить неточности еще до написания кода, что опять же сильно экономит время.

    Ну и отвчечу на некоторые Ваши сомнения:
    TSLint в VSCode прям жутко тугой
    TSLint официально deprecated, вместо него стоит использовать плагин к eslint, заодно можете мой конфиг попробовать.

    Типы? Есть JSDOC
    JSDoc в плане типов не умеет и 10% того, что умеет TypeScript. Кроме того, никто в здравом уме не пишет JSDoc на приватную логику, а значит проверки типов там не будет. JSDoc не гарантирует корректность рефакторинга, а вот благодаря TypeScript я, опять таки, точно не забуду обновить JSDoc.

    многие библиотеки nodejs не имеют типов
    может лет 5 назад так и было, но сейчас встретить библиотеку без типов - скорее исключение. Если библиотека популярная, но не предоставляет типов, скорее всего их уже написал кто-то другой, достаточно просто установить одноименный модуль из npm скоупа types и все будет работать само.

    Поддержка браузерами скомпилированного кода? Да какбы почти весь JS имеет поддержку 95%+, тот же Babel уже забыл когда использовал.
    Вообще это не основная задача компилятора TypeScript, а опциональная возможность. И babel + preset-env с ней справляются гораздо лучше. И никто не мешает использовать их вместе. А еще думаю вопрос времени, когда кто-то напишет оптимизатор кода использующий информацию о типах из TS.

    Примерно в каждой второй есть инстансы, на которые смотришь - и чешешь репу - а как называется тип этой переменной в @types/?
    import {someObject} from 'some-library';
    
    type TypeFromValue = typeof someObject;
    const valueCopy: TypeFromValue = {
        ...someObject,
        type: 'overrides',
        with: 'type check',
    };
    и кстати, вот пример того что JSDoc типы не умеют.

    //@ts-check
    и почти везде останется бесполезный any.

    P.S. удачи такие типы на JSDoc описывать
    P.P.S. Еще прелести современного TypeScript невозможные у...
    Ответ написан
    8 комментариев
  • В чем превосходство Typescript?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    Типы? Есть JSDOC.

    Именно Типы.
    1. Система типов у TypeScript по возможностям превосходит JSDOC.
    2. Много инструментов для автоматической проверки типов. JSDOC поменьше.


    Это такой более строгий предохранитель от того чтобы не выстрелить себе в ногу. Можете воспринимать это как навороченный линтер, который проверяет не форматирование кода, сколько логику его работы.
    Ответ написан
    1 комментарий
  • Можно ли считать стаж работы при разработке своего проекта?

    Да, можно, считай
    Если что, скажешь Влатька разрешил
    Ответ написан
    Комментировать
  • Насколько эффективно последовательное соединение (по подзарядке) powerbank?

    gbg
    @gbg Куратор тега Электроника
    Любые ответы на любые вопросы
    Так себе идея, потому что каждый выход от банка снабжен DC-DC преобразователем, который будет съедать себе, в рамках своего КПД, от 7 до 15% энергии.

    А в зарядной цепи может вообще линейный стабилизатор стоять, у которого КПД как такового нет - всю "лишнюю" энергию он добросовестно переведет в тепло.

    А если в середине цепочки будет "пустой" банк, это вообще будет профанация - на зарядку пустой батареи уходит больше энергии, чем она потом сможет отдать.
    Ответ написан
  • Как реализовать распознавание кривых на canvas?

    wataru
    @wataru Куратор тега Алгоритмы
    Разработчик на С++, экс-олимпиадник.
    Готовых решений я не знаю, но есть следующие идеи.

    Во-первых, научимся аппроксимировать одной кривой. Первая и четвертая точки нам известны - это первый и последний пиксель. координаты двух других опорных точек кривой Безье - это четыре неизвестных.

    Составим функцию ошибки f(x1, y1, x2, y2) = (X(i/n)-x_i)^2+(Y(i/n)-y_i)^2. Тут x_i, y_i - координаты i-ого пикселя в нарисованной кривой, пронумерованные от 0 до n, X(t), Y(t) - координаты точки на кривой Безье - линейные комбинации x1, x2 и y1, y2 с известными вычисляемыми от t коэффициентами. Это фактически сумма квадратов расстояний от каждого пикселя до неизвестной кривой. Ее можно минимизировать подобно методу наименьших квадратов - считайте производную по всем переменным, приравнивайте к 0. Получите 4 неизвестные и 4 линейных уравнения. Можно вообще на бумажке руками методом Краммера решить, а можно алгоритмом Гаусса подсчитать.

    Тут есть допущение, что i-ый пиксель будет аппроксимироваться t=i/n точкой на кривой. Вообще говоря, это не гарантированно, но в качестве некой грубой меры оптимальности подойдет. Может вообще отлично работать будет и так, я не знаю. Поэксперементируйте. Но еще можно потом честно искать ближайшую точку на кривой к заданному пикселю как оптимум полинома 6-ей степени от t, когда все опорные точки кривой фиксированы. Тут надо брать производную, находить ее нули и среди них брать лучшее t. Чтобы найти нули полинома 5-ой степени можно рекурсивно брать производную, находить нули полинома меньшей степени, и потом на каждом монотонном отрезке искать пересечение с OX бинарным поиском. Или использовать метод Ньютона. Это давно решенная задача - должно быть куча готовых решений.

    Когда вы так научились считать расстояние от кучки пикселей до кривой Безье, можно локально градиентным спуском по 4-м координатам x1, x2, y1, y2 улучшать эту правильную метрику с оптимума полученного грубой метрикой.

    Вот мы и умеем аппроксимировать кучку пикселей одной кривой. Заодно мы получаем метрику близости кривой к пикселям. Но надо сделать ее не зависящей от длины - поэтому складывайте квадраты расстояний и делите на количество пикселей.

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

    Это эмпирический алгоритм и он много где жадный. Нет никакой гарантии, что он даст математически оптимальный результат, но есть много шансов, что он даст достаточно хороший результат.
    Ответ написан
    2 комментария
  • Ревью кода. Что можно улучшить в этом коде?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В класс Task впихнули всё. А лучше бы как-то разделить: вот Task, их может быть ни одного или несколько. Вот App – это приложение, форма создания новой задачи; может, обработчик всех событий, которые всплывают из задач, в т.ч.; коллекция созданных задач; их сохранение в LocalStorage; отрисовка части задач в соответствие с фильтром.

    Внутри класса у методов общий префикс названия taskЧто-то-там – лишний, имхо.

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

    p.s. React да, можно. Или Vue.
    Ответ написан
    Комментировать
  • Ревью кода. Что можно улучшить в этом коде?

    @Sun_Day
    Честно говоря, это плохой код. Смысла разбираться в нем не имеет, долго объяснять все моменты(все это просто придется переписать под корень). Но все новички в программировании пишут что-то подобное, это нормально.

    Могут отметить несколько вещей:
    1) Нейминг css классов - почитайте про БЭМ, у вас что-то невразумительное. Да и БЭМ тут не нужен, если прям строго взглянуть - у него свои задачи.
    2) Используйте строгое равенство ===
    3) Условия внутри методов просто кошмар. В целом в методах спагетти код по работе с dom. Это так не делается. Нужно декомпозировать логику и писать лаконичный и выразительный код.
    4) Что-то можно было передать через constructor(), при создании экземпляра класса. Зачем это все пихать в сам constructor.

    На счет html, то просто попробуйте сверстать лендинг, лучше поймете что к чему.

    В общем, никуда это не выкладывайте всерьез). Ну и советую использовать тайпскрипт.

    Реакт можно изучать конечно.
    Ответ написан
    Комментировать
  • Работа с массивом и строкой, как вывести такое в консоль?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Пройти по массиву, разбивая длинные строки на несколько и подсчитывая длину самой длинной строки после разбивки.
    Потом вывести, добавляя звёздочки и необходимое число пробелов в конце каждой.
    Ответ написан
    3 комментария
  • Как тестировать оптимизацию frontend?

    bingo347
    @bingo347
    Crazy on performance...
    796stwepspdbny_xqrwrrtvoor4.png
    Ответ написан
    Комментировать
  • Компьютер стреляет током - ваши предположения?

    hottabxp
    @hottabxp
    Сначала мы жили бедно, а потом нас обокрали..
    Компьютер стреляет током — ваши предположения?

    Стрелять в ответ. Если не поможет, тогда нужно включать в заземлённую розетку. Если такой нет, наймите специалистов, они сделают.
    Ответ написан
    Комментировать
  • Анимация Canvas на JavaScript?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Нет такой штуки как MathPI, зато есть Math.PI
    Ответ написан
    1 комментарий
  • Как можно оптимизировать код решения этой задачи?

    0xD34F
    @0xD34F Куратор тега JavaScript
    function getWinner(points) {
      const [ a, b ] = points.reduce((acc, n) => (
        n.split('-').forEach((m, i) => acc[i] += +m),
        acc
      ), [ 0, 0 ]);
    
      return a === b
        ? undefined
        : a < b ? 2 : 1;
    }

    UPD. Всё равно слишком длинно. Вот так хорошо будет:

    const getWinner = points => [ 2, , 1 ][Math.sign(eval(points.join('+'))) + 1];

    Всё, "оптимизировал".
    Ответ написан
    1 комментарий