Задать вопрос
  • Можно ли учить TypeScript, не зная JavaScript(для бекенда)?

    @Interface
    Можно. Но столкнетесь с проблемой документации. Подавляющее большинство документации по TS будет рассматривать только дополнитьные абстракции TS над JS и в лучшем случае ссылаться на доки JS (в худшем - исходить из того, что вы JS знаете).
    Ответ написан
    Комментировать
  • Можно ли сделать switch-case из списка?

    @Interface
    Можно примерно так
    let one = ['a', 'b', 'c'];
    let two = ['1', '2', '3'];
    
    const inp = '2';
    
    const foundList = [one, two].find(list => list.includes(inp));
    
    switch (foundList) {
        case one: console.log('one'); break;
        case two: console.log('two'); break;
    }


    , но имхо лучше if'ами
    Ответ написан
    Комментировать
  • Как заблокировать нажатие по клавиатуре?

    @Interface
    Дефолтное поведение можно предотвратить через event.preventDefault(), но это не для всего сработает. Например, перебить Ctrl+w у вас не получится.

    Если вы пытаетесь заблокировать открытие dev-tools :) - бросьте это дело. Все равно, любой кто хоть немного шарит откроет все, что ему нужно и своего добьется, а тот кого это остановит все равно ничего серьезного там сделать не смог бы.
    Ответ написан
    Комментировать
  • Как из массива вывести большое количество товаров на чистом js?

    @Interface
    var goods = {};
    
    const numberOfGoods = 100;
    for (let i = 0; i < numberOfGoods; i++) {
     goods[`item${i}`] = {
        id: i,
        name: `диван №${i}`,
        description: `тут описание дивана №${i}`,
        price: Math.round(Math.random() * 200 + 1000), // цены рандомно от 1000 до 1200
     }
    }
    
    var out ='';
    for (var key in goods){
      out += 'Название: ' + goods[key].name+ '<br/>';
      out += 'Описание: ' + goods[key].description+ '<br/>';
      out += 'Есть на складе: ' + goods[key].price+ '<br/>'; // почему вдруг "pirce" = "есть на складе" ¯\_ツ_/¯
      out += '<hr>';
    }
    document.getElementById('outGoods').innerHTML = out;
    Ответ написан
    5 комментариев
  • Как можно наиболее быстро искать данные по JSON файлу?

    @Interface
    Если у вас "json" это пришедший из postgress'овского jsonb поля - то postgress умеет делать запросы внутри jsonb: https://hackernoon.com/how-to-query-jsonb-beginner... (первая ссылка в гугле).

    Если такой вариант не подходит очевидная оптимизация - высунуть создание регэкспа из цикла. Хотя я не уверен, что какой-нить v8 это несоптимизировал самостоятельно. (на моей машине это сокращает время втрое примерно)

    Какой у вас объем данных? Поиск по множеству строк не должен занимать много времени. И пока у вас не миллионы этих строк все должно быть быстро. Эквивалентный код на моей машине выполняет проход регэкспом по массиву из миллиона строк менее чем за 100мс. Если у вас бОльшие объемы или хотя бы сопоставимые - вы что-то делаете не так :) Ну или если вы ожидаете обработку такого объема данных моментально, то стоит скорректировать ожидания.

    P.s. это нода или браузер? Если нода - то пляски на стороне js все равно не имеют смысл так как радикально ускорить не получится, а вот 2-3 пользователя ищущие что-то вам все положат.
    Ответ написан
  • Какие есть альтернативы Electron?

    @Interface
    Посмотрите в сторону https://proton-native.js.org/#/

    Также я задавал подобный вопрос пару лет назад. Можете почитать: Есть ли у вас на примете GUI библиотеки для desktop приложений на JavaScript?
    Ответ написан
  • Как начать разрабатывать игры или написать свой игровой движок?

    @Interface
    Как начать разрабатывать игры или написать свой игровой движок?

    Создайте папку в любом удобном для вас месте на компьютере с названием "мой игровой" движок, по желанию можно еще туда положить readme файлик. Готово - вы начали писать движок. Теперь нужно двигаться к его завершению. По мере движения у вас появится множество новых более конкретных вопросов, на которые уже проще будет найти конкретный ответ.

    Несложно представить игровой движок для написания которого не нужно знать физику абсолютно. (движок для крестиков-ноликов, кроссвордов, судоку, текстовых квестов или уже серьезный движок для игр в стиле Diablo, Fallout (1-2-T) и т.д.).

    Сложнее представить движок без математики, как в прочем и все программирование. Однако, часто бывает достаточно классов 5-8 математики чтобы писать что-то вполне серьезное, если оно не требует этой математики. Простенький платформер или скролл шутер не потребует от вас знания тригонометрии, например.

    Довольно ожидаемо, что если под своим движком вы подразумеваете продукт уровня UE, Unity или чего-то отдаленно сопоставимого, или даже простейший 3д движок написанный с нуля, то остается пожелать вам удачи.

    Я бы советовал начать с практики, то есть начать его постепенно писать, понимая, что через месяц/год все придется выкинуть и (опционально) начать с нуля. А там уже сформируются конкретные вопросы и теория будет ложиться лучше на фундамент проб и ошибок.
    Ответ написан
    Комментировать
  • Как использовать один терминал, для нескольких процессов?

    @Interface Автор вопроса
    Наткнулся на вот этот npm модуль: https://github.com/kimmobrunfeldt/concurrently#readme в моем случае он достаточно хорошо решает то, что мне нужно
    Ответ написан
    Комментировать
  • Как конкретизировать сложный тип?

    @Interface
    Поделитесь для чего вам это нужно? Я не спрашиваю про реальную задачу, а скорее про демонстрационный код, подобный тому что вы привели.

    Единственная причина которая приходит мне в голову это: вам нужно объявить переменную, которая будет иметь более узкий тип чем Some, который вы хотите вывести автоматически, а не писать вручную, но при этом вы хотите иметь гарантию того итоговый тип является подтипом Some.

    Как один из вариантов решения, могу предложить это:
    interface Some {
        value: string | string[];
    }
    
    type Extends<E, T extends E> = T;
    
    const foo = {
        value: ['a', 'b'] // здесь всегда будет массив
    }
    foo as Extends<Some, typeof foo>;

    playground

    То есть объявление переменной состоит из 2 выражений: объявление переменной с автоматическим выводом типа и валидация полученного типа.

    P.s. к сожалению, просто foo as Some не отловит все, что нужно, например {value: ['a', 'b', 8]}
    Ответ написан
  • Почему random не работает?

    @Interface
    if(x=input){
    ->
    if(x === input){

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

    @Interface
    Ключем в объекте может любая строка или Symbol (es6), все остальное будет приведено к строке. Если ваш ключ - строка, нет никаких проблем. Если хочется больше свободы или уверенности - используйте Map (es6), он умеет использовать объекты как ключи, например.
    Ответ написан
    2 комментария
  • Как задать задержку в цикле for?

    @Interface
    let $body = document.querySelector('body');
    let $bodyH = $body.clientHeight;
    let $bodyW = $body.clientWidth;
    
    function sleep(ms) {
    	return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    async function main() {
    	let ask = prompt('How many circles you want to draw?');
    
      if (ask !== null || ask !== '') {
        for (let i = 0; i < ask; i++) {
          drowCircle(i);
          await sleep(1000);
        }
      }
    }
    
    main();
    
    function drowCircle(i) {
      let $circle = document.createElement('div');
      let $circleSize = getRand(50, 100);
      let positionX = getRand(0, $bodyW - $circleSize);
      let positionY = getRand(0, $bodyH - $circleSize);
    
      $body.insertAdjacentElement('afterbegin', $circle);
    
      $circle.style.width = $circle.style.height = `${$circleSize}px`;
      $circle.style.zIndex = i+1;
      $circle.style.backgroundColor = `rgb(${getRand(0,255)},${getRand(0,255)},${getRand(0,255)})`;
      $circle.style.borderRadius = '50%';
      $circle.style.position = 'absolute';
      $circle.style.top = `${positionY}px`;
      $circle.style.left = `${positionX}px`;
    }
    
    function getRand(min, max) {
      let rand = min - 0.5 + Math.random() * (max - min + 1);
      return Math.round(rand);
    }
    Ответ написан
    Комментировать
  • Почему puppeteer пишет, что node detached?

    @Interface
    Сама нода 100% есть, потому что если просто получать ее textContent, это работает.

    Это ошибочный вывод. textContent вполне работает с "виртуальной" нодой:
    const node = document.createElement('div');
    node.textContent = 'hello';
    console.log(node.textContent)
    Ответ написан
    Комментировать
  • Как узнать, что пользователь прокрутил страницу до нужного элемента на странице?

    @Interface
    Помимо того, что предложили другие пользователи. Можете попробовать https://developer.mozilla.org/en-US/docs/Web/API/I...

    Это вроде то что вам нужно, но не уверен насчет поддержки браузерами (подойдет ли вам такая)
    Ответ написан
    Комментировать
  • Как в TS получить тип, возвращаемого функцией результата?

    @Interface
    Если я все правильно понял то сигнатура runAgents должна стать чем-то вроде:
    async function runAgents<T extends IAgentList>(agents: T): Promise<ResolveResult<T>>

    где ResolveResult:
    type ResolveResult<T extends IAgentList> = {
        [key in keyof T]: T[key] extends IAgentBase<infer R> ? R : never;
    }


    Решение основанно на infer из TS 2.8: https://www.typescriptlang.org/docs/handbook/relea...

    Весь код (слегка измененный):
    spoiler
    type IItem = {type: 'IItem'};
    type IDataSet = {type: 'IDataSet'};
    export type IAgentList = {
        [key: string]: IAgentBase<any>;
    }
    
    export interface IAgents extends IAgentList {
        items: IItemsParser;
        page: IPageParser;
        parser: IWebParser;
    }
    
    export interface IAgentBase<T> {
        parse(): Promise<T>;
    }
    
    export interface IItemsParser extends IAgentBase<IItem[]> {
    }
    
    export interface IPageParser extends IAgentBase<IDataSet[]> {
    }
    
    export interface IWebParser extends IAgentBase<any> {
    }
    
    export interface IAgentsResult<T> {
        items?: IItem[];
        page?: IDataSet[];
        parser?: any;
    }
    
    type ResolveResult<T extends IAgentList> = {
        [key in keyof T]: T[key] extends IAgentBase<infer R> ? R : never;
    }
    
    // в реальности все иначе, написал для понимания желаемого результата
    async function runAgents<T extends IAgentList>(agents: T): Promise<ResolveResult<T>> {
        const result: ResolveResult<T> = {} as any;
        Object.keys(agents).forEach(
          async key => result[key as keyof T] = await agents[key as keyof T].parse()
        );
        return result;
    }
    
    async function main() {
        const agents : IAgents = {} as any;
        const result = await runAgents(agents)
        result // typed
    }
    Ответ написан
    1 комментарий
  • Точка останова vs code прямо в тексте, как убрать?

    @Interface
    На вкладке Debug, слева внизу можно увидеть список всех breakpoint'ов, там ее можно удалить. Или можно удалить все.

    Также все breakpoint'ы можно удалить через
    ctrl + shift + p Debug: Remove All Breakpoints
    Ответ написан
    1 комментарий
  • Сервер статус 0?

    @Interface
    Скорее всего из-за краткой записи xhr.open('GET','inner.js',true)
    запрос уходит по протоколу file:// потому что скорее всего вы открываете сайт с жесткого диска напрямую, а в xhr.open не указываете протокол явно, поэтому он "наследуется" от страницы.

    Я советую вам:
    1) открывать сайт через локальный сервер. То есть по адресу по типу localhost:5000 . Для этого может помочь библиотека serve: https://www.npmjs.com/package/serve
    после того как сможете открыть сайт на localhost'e
    2) максимально упростите обработку запроса на ноде и код сервера. Например шлите всегда на все "Hello world!"

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

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

    @Interface
    Тут стоит использовать throttle или debounce
    https://lodash.com/docs/#throttle
    https://lodash.com/docs/#debounce

    Когда-то давно я писал маленькую библиотеку, которая как раз решает задачу с поиском. Я не то чтобы предлагаю ее использовать (хотя я был бы только рад :) ), но зато там есть демо, где иллюстрируется работа throttle: https://int0h.github.io/promise-decorators/
    Сама библиотека: https://github.com/int0h/promise-decorators
    Пример с поиском: https://github.com/int0h/promise-decorators/blob/g... (живьем есть на демо странице)

    Еще хорошая иллюстрация есть в rxmarbles: https://rxmarbles.com/#debounce
    (можно это же решать rx'ом)
    Ответ написан
    2 комментария
  • Какие технологии используются в следующей таблице?

    @Interface
    Судя по всему, вам интересно как сделать выделение дат как на скриншоте.

    Это слабо связанно с "технологиями". Разные люди вкладывают разные смыслы в слово "технологии", но в данном контексте под технологиями обычно понимаются такие вещи как: React, Vue, Angular, SSR, etc.

    Так вот эти технологии:
    1) очень слабо связаны с выбором дат;
    2) их невозможно понять по скриншоту; (поэтому если вам интересны именно они - давайте ссылку)

    Также есть сервисы автоматически определяющие технологии использованные на том или ином сайте. Например: https://www.wappalyzer.com/

    Если речь о выборе дат: то вам нужно гуглить термин date picker или Date Range Picker.
    Вы сможете найти разные реализации этого функционала для разных фреймворков:
    - react: htttps://github.com/airbnb/react-dates
    - vue: https://www.npmjs.com/package/vue2-daterange-picker
    - jQuery: www.daterangepicker.com
    ...и т.д.

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

    Итоги:
    - по скриншоту технологии определить невозможно
    - скорее всего они вам и не нужны
    - чтобы повторить, нужно либо искать готовые решения, либо писать самостоятельно на технологиях проекта
    - чтобы узнать как писать самостоятельно, нужно:
    - понимать свой уровень и обратиться к специалистам, если задача - не ваш профиль или пока не по зубам
    - в случае возникновения проблем обращаться к гуглу, а потом сообществу (сюда, например) с конкретными вопросами (например, про техническую реализацию или какое-то не понятное поведение)
    Ответ написан
    Комментировать