Ответы, понравившиеся пользователю rifat2125

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

Михаил Р. @Mike_Ro

Python, JS, WordPress, SEO, Bots, Adversting

В порядке убывания по фактору популярность:
- Handlebars (мой выбор на 2023).
- EJS.
- nunjucks.

Ответ написан более двух лет назад

Комментировать

Как исправить ошибку [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See?

Руслан Лопатин @lorus

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

Так что либо не вызывать preventDefault(), либо регистрировать обработчик как-то так:

element.addEventListener(handleEvent, { passive: false });

Подробнее здесь

Ответ написан более трёх лет назад

4 комментария

Как можно оптимизировать данный код и сократить количество циклов?

Сергей Соколов @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 Куратор тега JavaScript

♬♬

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

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

Подробнее на примере NGINX (на англ.)

Ответ написан более двух лет назад

Комментировать

Как организовать работу с одними стилями на разных проектах?

Aetae @Aetae Куратор тега JavaScript

Тлен

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

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

Ответ написан более двух лет назад

1 комментарий

Как вызвать следующий interval после смены флага?

Сергей Соколов @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. А у нас печеньки! А у вас?

Сначала сделать каждый график отдельно, а уже затем сделать рефакторинг с выносом одинакового кода в общий класс или классы.

Ответ написан более двух лет назад

Комментировать

Кто знает библиотеку JS, чтобы сделать подобный график?

kefircus @kefircus

Попробуйте https://plotly.com/javascript/
Штука абсолютно бесплатная, кстати

Ответ написан более двух лет назад

1 комментарий

В чем отличие 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%)?

viva cristo64 @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, чтобы он активировался только вместе со списком)

Ответ написан более двух лет назад

Комментировать

Как использовать следующий ключ объекта?

Loli E1ON @E1ON Куратор тега JavaScript

Vocaloid lover

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 комментарий

Какое регулярное выражение подойдет для проверки номера телефона?

Вячеслав Яшников @VyacheslavY

Зеленый свет для:
+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 @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 комментарий

Войдите на сайт