• В какую сторону развивается Vue и есть ли ему современные альтернативы?

    yarkov
    @yarkov Куратор тега Vue.js
    Помог ответ? Отметь решением.
    Что вообще с фреймворком? Он развивается?

    Вы ведь даже не попытались гуглить. Не ходили в github проекта.
    Если да то в какую сторону и что слышно про Vue 4?

    В лучшую. Зачем вам 4? Разберитесь пока с тем что есть.
    Про React знаю, но интересуют именно Vue и ему подобные фреймворки

    Возьмите React )) Ну а подобные Vue... На слуху наверное только Svelte.
    Ответ написан
    Комментировать
  • Как сделать такую маску в CSS?

    Aetae
    @Aetae
    Тлен
    clip-path прекрасно умеет скруглять, rtfm.

    Вот через фильтр, когда-то похожее делал:

    Принцип прост: размываешь подложку через feGaussianBlur, делаешь края снова резкими через ComponentTransfer альфа-канала. В твоём случае ещё stroke и drop-shadow наверное понадобятся, сам смотри.

    ...upd: из интереса нафигачил без фильтров:

    Всё возможно.:)

    Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

    clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)
    Ответ написан
    5 комментариев
  • Что выбрать RTK Query, Thunk или Saga?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега React
    Все они не дружат с серверным рендерингом, поэтому лучше использовать TanStack Query.
    Ответ написан
    4 комментария
  • Как реализовать свой класс мап, имитируя поведение стандартной хэш-мапы?

    bingo347
    @bingo347 Куратор тега TypeScript
    Crazy on performance...
    Для начала стоит почитать про устройство хэш таблиц:
    https://ru.wikipedia.org/wiki/%D0%A5%D0%B5%D1%88-%...
    https://habr.com/ru/articles/509220/
    Куча вопросов сразу отпадёт.
    Классическая структура данных кстати, полезно знать не зависимо от ЯП.

    1) Не понятно, что конкретно должна делать hash функция
    Вычисляет хэш от ключа. Остаток от деления хэша на длину массива - это индекс бакета, в котором будет хранится пара ключ-значение.

    2) Какой тип использовать у buckets
    Как вариант такой:type Buckets<K, V> = ([K, V] | undefined)[];
    Ответ написан
    Комментировать
  • Зачем нужны DTO, когда есть типы и интерфейсы в языках программирования?

    mayton2019
    @mayton2019
    Bigdata Engineer
    DTO объекты часто пересекают границы Языков (Java/JavaScript/GWT) и сетевых протоколов (Rest/Graphql/SOAP/Avro).

    И эти объекты могут нести на себе семантику только чистых данных. Вы не сможете через сеть
    из Java в C# например передать интерфейс или объект с методами.

    И многие фреймворки искусственно ограничивают DTO как раз для того чтобы эти объекты однозначно
    декодировались всеми сторонами-участниками протокола взаимодействия. А фреймворки - обычно
    предоставляют средства кросс-компилляции этих DTO.
    Ответ написан
    Комментировать
  • Как сделать чтобы график в chart js начинался с -100?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Ну может здесь проблема
    beginAtZero: true,
    Ответ написан
    1 комментарий
  • Как в typescript объединить ключи, и если появляются повторы, то сделать объединение типов?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Запилил такой вариант.

    Поддерживаются вложенные объекты и массивы (кортежи), см. пример. Глубина рекурсии произвольная, но результат получается здоровенный, если много всего.

    Решение влоб: сначала находим все пути до простых значений, потом по множеству этих путей собираем объект.
    Ответ написан
    3 комментария
  • Стоит ли использовать lodash сейчас?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Я так понимаю все что предлагает лодаш уже реализовано нативно

    Не понимаете.
    Ответ написан
    Комментировать
  • Есть ли оверхед/нагрузка на большое количество обработчиков событий?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Обработчиков у вас в любом случае 200 вешается.
    Вся разница в том, что в первом случае они ссылаются на двести функций, а во втором на одну.
    Создание функции требует определённых ресурсов, поэтому оверхед есть. Будет ли он заметным — это другой вопрос. Ответ на него зависит от того, что на самом деле в вашем коде происходит. На компьютере вы, скорее всего, разницы никогда не почувствуете, а вот на очень слабом телефоне при огромном количестве функций может начать тормозить.

    P.S. Проще использовать делегирование в таких случаях.
    Ответ написан
    Комментировать
  • Как строку с часами, минутами и секундами преобразовать в число?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Засовываем в массив пары из регулярного выражения, с помощью которого из строки достаётся число перед единицей измерения, и эквивалентного данной единице измерения количества секунд; оббегаем этот массив, выдёргиваем числа, умножаем их на количество секунд, складываем:

    const units = [
      [ 'де?н', 24 * 60 * 60 ],
      [  'час',      60 * 60 ],
      [  'мин',           60 ],
      [  'сек',            1 ],
    ].map(n => [ RegExp(`\\d+(?=\\s+${n[0]})`), n[1] ]);
    
    const getSeconds = str =>
      units.reduce((acc, n) => acc + n[0].exec(str) * n[1], 0);

    getSeconds('2 часа 22 секунды') // 7222
    getSeconds('99 минут') // 5940
    getSeconds('1 час 1 минута 1 секунда') // 3661
    getSeconds('1 день 23 часа 59 минут 60 секунд') // 172800
    getSeconds('2 дня') // 172800
    getSeconds('546 секунд и ещё 2 минуты') // 666

    Если вдруг возможно повторение единиц измерения внутри одной строки, то поиск с помощью регулярных выражений должен быть глобальным - RegExp(`\\d+(?=\\s+${n[0]})`, 'g'), а функция подсчёта секунд примет следующий вид:

    const getSeconds = str =>
      units.reduce((seconds, [ reg, multiplier ]) => {
        return [...str.matchAll(reg)].reduce((acc, n) => acc + n * multiplier, seconds);
      }, 0);
    
    // или
    
    const getSeconds = str => units
      .flatMap(n => (str.match(n[0]) ?? []).map(m => m * n[1]))
      .reduce((acc, n) => acc + n, 0);
    
    // или
    
    const getSeconds = str => eval(units
      .map(n => `${n[1]} * (${str.match(n[0])?.join('+') ?? 0})`)
      .join('+')
    );

    getSeconds('1 секунда плюс 3 секунды плюс 5 секунд') // 9
    getSeconds('21 день, 7 дней, да ещё 3 дня - всего секунд в мае месяце будет') // 2678400
    Ответ написан
    2 комментария
  • Ошибка при запуске таска Gulp?

    6528d8858f8a4901424549.png
    Ответ написан
    Комментировать
  • Проблема с цветом видео в разных браузерах?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Конечно сталкивались, и простого решения конкретной проблемы нет: видео это немного отдельный поток и там всегда могут быть свои настройки отображения.

    Решения есть следующие:
    1. Делать видео сразу с прозрачностью, а не с бэкграундом, современные браузеры это поддерживают:
    2. Рисовать видео на canvas, программно подгоняя фон.
    3. Накладывать SVG фильтр на видео, который погонит фон.
    Ответ написан
    Комментировать
  • Как сортировать по индексу другого массива в js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Сортировать по indexOf( ID ) в массиве, задающем порядок сортировки:
    var data = [
      {ID: 1, country: 'England'},
      {ID: 4, country: 'USA'},
      {ID: 9, country: 'Russia'},
      {ID: 5, country: 'Germany'},
      {ID: 6, country: 'France'},
    ];
    
    const order = [5,1,9,6,4];
    
    data.sort((a,b) => order.indexOf(a.ID) - order.indexOf(b.ID));
    
    /* [
      {"ID":5,"country":"Germany"},
      {"ID":1,"country":"England"},
      {"ID":9,"country":"Russia"},
      {"ID":6,"country":"France"},
      {"ID":4,"country":"USA"}]
    */


    На больших массивах для ускорения:
    1. добавить в исходный массив новое поле с порядковым номером, который каждый элемент должен занять после сортировки;
    2. отсортировать по этому полю.

    Так будет быстрее, чем на каждой операции сравнения двух элементов искать их индексы во втором массиве.
    data = data.map( e => {e.sortBy = order.indexOf(e.ID); return e;} );
    data.sort( (a,b) => a.sortBy - b.sortBy);
    Ответ написан
    Комментировать
  • Как изменять размер элемента при наведении на его край курсора мыши?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    окей яндекс: custom resizable element
    https://habr.com/ru/articles/321612/
    Ответ написан
    5 комментариев
  • Почему в теле цикла не отображается консоль?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Когда вы сравниваете число с массивом, какой вы ожидаете результат?
    - i while(<= arr){
    + i while(<= arr.length){

    Более того, цикл у вас бесконечный, потому что i в нём не изменяется, так что это даже и хорошо, что он не запускается.
    Ответ написан
    1 комментарий
  • Замыкания не существует?

    Stalker_RED
    @Stalker_RED
    Я немного добавил наглядности
    function one() {
      const oneVar = 'Hello!'
      let counter = 0;
      console.log('функция one работает прямо сейчас, в счетчике', counter)
    
      function two() {
        console.log(oneVar, ++counter)
      }
      
      console.log('функция one почти завершилась, в счетчике все еще ', counter);
      return two
    }
    
    const three = one();
    console.log('функция one точно завершилась, даже return сработал');
    console.log('в переменной three сейчас функция two()');
    console.log(three);
    
    
    three();
    three();
    three();
    console.log('обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!');

    выхлоп:
    "функция one работает прямо сейчас, в счетчике", 0
    "функция one почти завершилась, в счетчике все еще ", 0
    "функция one точно завершилась, даже return сработал"
    "в переменной three сейчас функция two()"
    function two() {
      console.log(oneVar, ++counter)
    }
    "Hello!", 1
    "Hello!", 2
    "Hello!", 3
    "обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!"
    Ответ написан
    Комментировать
  • Почему обработчик реагирует на событие, случившееся до его установки?

    0xD34F
    @0xD34F Куратор тега React
    Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

    Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

    Т.е., жмёте на кнопку, открывается окно, запускается эффект, устанавливается обработчик клика на document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.

    При добавлении задержки, данная проблема уходит

    Можете ещё попробовать ловить событие в фазе погружения:

    document.addEventListener('click', handleOutsideClick, true);
    return () => document.removeEventListener('click', handleOutsideClick, true);
    Ответ написан
    Комментировать
  • Какая функциональная разница между этими подходами создания объектов в JS?

    Xuxicheta
    @Xuxicheta
    инженер
    допустим User это функция-конструктор, или класс.
    user = new User()

    будет создан объект, у которого есть свойство __proto__ в котором лежит объект, состоящий из одного свойства constructor, которая и есть ваша функция User. (Ну типа такой { constuctor: User }. Если писать через class то мы конструктор явно прям зададим. )
    Этот же объект лежит по адресу User.prototype, т.е.
    user.__proto__ === User.prototype
    Этот объект создается для любой объявленной функции (вообще не обязан, но в V8 вроде так), и например User.prototype.constructor === User

    Что такое метод класса, это функция по адресу User.prototype.sayHi (оно же лежит в user.__proto__.sayHi)
    Потом, когда мы пишем user.sayHi js проходит по цепочке из свойств __proto__ и ищет там эту функцию, вызывает ее и передает в качестве контекста (this) наш объект user.

    А теперь посмотрим разницу с вашим
    function User(x,y){
    let name = x;
    let age = y;
    
    return {
    name : name,
    age : age,
    sayHi: function(){
    console.log("My name is " + this.name);
    }
    }
    }


    тут все поля и функции лежат в одном объекте, который имеет только дефолтный __proto__ Object.prototype, автоматически присваиваемый при создании объекта через объектный литерал.
    При вызове функции несколько раз будут созданы несколько никак не связанных объекта. Прототип у них Object, это единственное что их роднит. Функции будут созданы каждый раз заново.
    user1.sayHi !== user2.sayHi
    Оператор instanceof не найдет у них общего предка User.

    Вот в этом и разница. Можно ли так писать? Можно, только зачем?
    Как назвать? Ну допустим функция-фабрика объектов. (не путатьс классом-фабрикой и со статическим фабричным методом, там создаются инстансы классов).

    Найдёте теперь сами разницу в ваших примерах 1 и 2?
    А так же почему в примере 1 new User() и просто User() дадут совершенно разный результат? И как сделать чтоб было одинаково?
    Ответ написан
    1 комментарий