• Какой шаблонизатор посоветуете?

    Mike_Ro
    @Mike_Ro
    React/Django, WordPress, SEO, автоматизация, ML
    В порядке убывания по фактору популярность:
    - Handlebars (мой выбор на 2023).
    - EJS.
    - nunjucks.
    Ответ написан
    Комментировать
  • Как исправить ошибку [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See?

    А что не понятно? Нельзя вызывать event.preventDefault() внутри пассивного обработчика. А обработчики для тач-событий пассивны по умолчанию.

    Так что либо не вызывать preventDefault(), либо регистрировать обработчик как-то так:
    element.addEventListener(handleEvent, { passive: false });

    Подробнее здесь
    Ответ написан
    4 комментария
  • Как можно оптимизировать данный код и сократить количество циклов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно подготовить для книг «оглавление»: объект, где ключи id книг, значения сами объекты книг.
    Затем останется заменить в массивах user'ов id книг на значения из словаря.
    const library = books.reduce((acc, c) => (acc[c.id] = c, acc), {});
    const result = users.map(user => {
      const books = user.books.map(id => library[id]);
      return { ...user, books };
    });
    Codepen
    Ответ написан
    Комментировать
  • Как хранить большие видео на сервере?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Нужен веб-сервер, который умеет в большие видео-файлы: отдавать не просто весь файл целиком, а находить в нём запрошенное время начала, и выдавать по небольшим кусочкам. См. DASH (на англ.)

    Чтобы играть видео можно было с любого места, не скачивая часовое видео полностью.

    Подробнее на примере NGINX (на англ.)
    Ответ написан
    Комментировать
  • Как организовать работу с одними стилями на разных проектах?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Одинаковая структура при разных реализациях - это больно и малореально. Существуют css\html-only дизайн системы, которые можно брать и реализовывать на любом фреймворке, но это тот ещё геморрой без особого выхлопа.

    Мне кажется вам стоит решить чего вы будете-придерживаться впредь, а что легаси, и вынести таки все компоненты одной актуальной версии(vue2 или vue3) в библиотеку, скомпилировав её в режиме web-components. Веб компоненты вы сможете подключать куда угодно, ценой лишних 100кб на непрофильный vue-runtime в случае несовпадения.
    Ответ написан
    1 комментарий
  • Как вызвать следующий interval после смены флага?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно «подглядывать» за изменениями свойства объекта.
    Предлагаю не переменную isLoading, а свойство некого объекта изменять: flags.isLoading = false;

    const PERIOD = 5000;
    let timeout;
    
    const action = () => {
      console.log('Action!');
      // this.switchNextTab()
      clearTimeout(timeout);
      timeout = setTimeout(action, PERIOD);
    };
    
    const flags = {
      _isLoading: false,
    
      set isLoading(value) {
        this._isLoading = value;
        if (!value) {
          // isLoading стал false
          action();
        }
      },
    
      get isLoading() {
        return this._isLoading;
      },
    };
    
    timeout = setTimeout(action, PERIOD);
    
    // где-то в коде:
    flags.isLoading = true;
    // ...
    flags.isLoading = false; // тут же выполнится action
    Ответ написан
    Комментировать
  • Как лучше реализовать классы в JS?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Сначала сделать каждый график отдельно, а уже затем сделать рефакторинг с выносом одинакового кода в общий класс или классы.
    Ответ написан
    Комментировать
  • В чем отличие EventLoop в браузере от EventLoop в Node.js?

    black1277
    @black1277
    Вольный стрелок
    Вы немного запутались. Начиная с 11-й версии Node.js, разница в поведении приведенного вами кода в браузере и ноде - была устранена. Касаемо 6 этапов или фаз, они происходят внутри движка libuv(libuv - это многоплатформенная библиотека C, которая обеспечивает поддержку асинхронного ввода-вывода на основе циклов событий).
    Разница в том, что в Node.js мы можем не дожидаться окончания всех этих фаз, а вклиниться на определенных этапах для исполнения микрозадач (при помощи setImmediate и process.nextTick), а в браузере идет взаимодействие с Web API’s (браузерные или веб API), из которого могут поступать новые события (клики, движения мыши и др.), добавляющие в очередь новые макрозадачи(если установлены обработчики этих событий). Кроме того, в браузере есть рендеринг, который не может быть выполнен пока идет выполнение задачи движком(из этого следует, что необходимо разбивать тяжелые и длительные задачи на части).
    Как я не пытался изложить точнее и короче, к моим словам можно придраться буквально к каждой фразе. Поэтому, лучше самому изучить первоисточник и пару статей на русском:
    What is the Event Loop?
    Объяснение работы EventLoop в JavaScript
    Игра по правилам: Event loop Node.js
    Как устроены цикл событий и стек вызовов в JavaScript
    Ответ написан
    1 комментарий
  • Плавное появление сверху ul списка (width, height = 100%)?

    MaminProgrammist
    @MaminProgrammist
    Я слава беброу
    Смотрите:
    Лично я делаю так - для "гамбургера" и списка делаю див, объединяющий их двоих, потом, будем считать, что этот див будет назван .dropdown, создаем ему ширину с высотой и ставим в том месте где и гамбургер, пишем:
    .mob-links {
        transform: scaleY(0);
        transform-origin: 0, 0;
        transform-duration: 1s;
    }
    
    .dropdown:hover .mob-links {
        transform: scaleY(1);
        transform-origin: 0, 0;
        transform-duration: 1s
    }
    (а потом прописываете анимацию для самого "гамбургера" через .dropdown:hover, чтобы он активировался только вместе со списком)
    Ответ написан
    Комментировать
  • Как использовать следующий ключ объекта?

    E1ON
    @E1ON Куратор тега JavaScript
    Programming, Gamedev, VR
    const obj = {
     '1': QWE,
     '5': ASD,
     '7' : ZXC
    }
    
    const keys = Object.keys(obj).sort();
    const nextKey = keys[keys.indexOf("5")+1];
    
    console.log(obj[nextKey])
    Ответ написан
    1 комментарий
  • Какое регулярное выражение подойдет для проверки номера телефона?

    Зеленый свет для:
    +79261234567
    89261234567
    79261234567
    +7 926 123 45 67
    8(926)123-45-67
    123-45-67
    9261234567
    79261234567
    (495)1234567
    (495) 123 45 67
    89261234567
    8-926-123-45-67
    8 927 1234 234
    8 927 12 12 888
    8 927 12 555 12
    8 927 123 8 123

    ^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$
    Ответ написан
    5 комментариев
  • Какое регулярное выражение подойдет для проверки номера телефона?

    @kudry
    Тоже столкнулся с проблемой валидизации телефонных номеров.
    Телефоны берутся с участников вебинаров, на которые записываются люди из очень разных стран.
    Соответственно, со всеми предыдущими схемами возникают проблемы:
    1) а что если телефон с Украины (не +7-, а +38-)? А из Казахстана? А США (1-)? А Уганда ( +233-)? (из Уганды, правда, пока слушателей не было, но все впереди).
    2)В разных местностях приняты самые невообразимые способы разбиения телефона на группы цифр:
    8(8888)8-88-88-88 например. или 888(88)88888-888. Да и какие угодно могут возникнуть в будущем.
    Поэтому вариант с "дефолтным разбиением типа "8(888)888-88-88 ну совершенно не катит.

    Соответственно, я придумал следующий валидатор:
    1) В начале могут быть пробелы, после них может быть "+" (а может и не быть)
    2) Дальше должна идти группа цифр в количестве от 10 до 14 (мне нужны номера в международном формате; но если кому-то нужны более короткие - можно исправить диапазон длин).
    3) Поскольку я не знаю, как люди группируют цифры - до и после каждой цифры может быть один из 8 знаков ("-", " ", "_", "(", ")", ":", "=", "+"). Это значит, что между двумя цифрами могут быть любые два из этих знаков.

    В итоге получилось очень коротко и понятно )) :
    /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/

    Съедает следующие телефоны:
    +7(903)888-88-88
    8(999)99-999-99
    +380(67)777-7-777
    001-541-754-3010
    +1-541-754-3010
    19-49-89-636-48018
    +233 205599853
    Ответ написан
    1 комментарий