Задать вопрос
  • Как принудительно открыть декстопную версию внутри iframe?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Подсмотрел такую фишку в codepen: задавать корню принудительно нужную ширину и использовать
    transform: scale(реальная ширина/установленная ширина)
    , вписывая обратно.

    А по поводу особого vue-фрейма - а собсвенно что такого вы от него хотите? Обычный фрейм справляется со своей задачей.)
    Ответ написан
    1 комментарий
  • Насколько правильно так перезаписывать свойство?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Перезаписывать не надо. Проверили все условия и присвоили разок.
    Если надо присваивать много - Object.assign вам в помощь.
    Ответ написан
    Комментировать
  • Как удалить теги?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    В слот попадает не "разметка", а другой vue контент. Ищите место, где используется этот компонент(по #contents, v-slot:contents или slot='contents'), и там правьте.
    Хотя учитывая наличие ref - там и возможен говнокод, с вручную запиханой разметкой(искать по this.$refs.container), но сомнительно.

    В любом случае в vue вы работаете не с "тегами", а с данными. Удалять лишнее надо до того как оно отрисовано в vue.
    Ответ написан
    Комментировать
  • Как рассчитать время смен на js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Как-то так:
    const today = moment().startOf('day');
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const mapFunc = ({ End, Start, Amount }) => {
      const points = [End, Start];
      const shift = moment(today).seconds(Start);
      const shifts = [];
      const order = Start > End;
    
      for (let i = 0; i < Amount; i++) {
        shifts.push(
          shift.format(dateFormat)
          + ' - '
          + shift
            .hours(0) // очищаем часы
            .minutes(0) // и минуты
            .seconds(points[i % 2]) // чередуем временную точку: чёт - End, нечёт - Start
            .add(i % 2 ^ order, 'd') // добавляем день если смена переходит на следующий
            .format(dateFormat)
        )
      }
      return shifts
    }
    
    console.log(mapFunc({
      "Start": 25200, 
      "End": 68400, 
      "Amount": 5
    }));
    Ответ написан
  • Кто знает в чем причина такой проблемы?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Запускать его надо не через обычный yarn serve, а через yarn electron:serve. Как и билдить. Читайте описание тех модулей, что подключаете.
    Ответ написан
    3 комментария
  • Как отследить время провождения пользователя на странице?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Такие вещи ты должен сам писать. Тут не хватает только капельки логики - именно того, что должен юзать прогер.

    Вот код, но до добра тебя он не доведёт
    function getDebouncedReq(params) {
      var state = debounced.state = false;
    
      var _debounce = null;
      var _interval = null;
      var _that = null, _args = [];
    
      function debounced() {
        _that = this;
        _args = Array.prototype.slice.call(arguments, 0);
        if(state === false) {
          state = debounced.state = true;
          if(params.onOnline) 
            params.onOnline.apply(_that, _args);
          _interval = setInterval(function(){
            if(params.onInterval)
              params.onInterval.apply(_that, _args);
          }, params.interval || 1000);
        } 
        clearTimeout(_debounce);
        _debounce = setTimeout(function(){
          clearInterval(_interval)
          state = debounced.state = false;
          if(params.onOffline) 
            params.onOffline.apply(_that, _args);
        }, params.idleWait || 60000);
      }
    
      return debounced;
    }
    
    $(document).ready( function(){
      var requester = getDebouncedReq({
        idleWait: 6000,
        interval: 1000,
        onOffline: function(){
          console.log('offline');
        },
        onOnline: function(){
          console.log('online');
        },
        onInterval: function(){
          console.log('interval');
        }
      }, 10000)
    
      $(document).bind('mousemove keydown scroll', requester);
      $(document).trigger("mousemove"); 
    
      $(document).bind('click', function() {
        alert(requester.state)
      });
    });

    P.S. Посылать ajax запросы в интервале не рекомендуется: запрос может занять больше времени чем установленный интервал, в коем случае запросы начнут накапливаться как снежный ком и всё умрёт. Правильно делать следующий запрос только после завершения предыдущего.
    Ответ написан
    3 комментария
  • Компонент карта для Vuejs?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если совсем просто, можно утащить например отсюда карту мира в svg и навешать обработчики вручную.
    Если посложнее - оттуда же стащить geojson версию и использовать любую либу, умеющую с ним работать.
    Если слишком толстые карты - можно их прогнать через соответстующие оптимизаторы.
    Ответ написан
    Комментировать
  • Как собрать сложный проект на vue (с доп. модулями)? Правильно ли я это делаю?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Локальный модуль можно указывать через link: или через file:. В первом случае создаётся симлинк на модуль в node_modules, во втором модуль туда просто копируется. В первом случаем может не завестись по разным эзотерическим причинам, но если завелось - удобнее конечно использовать его.

    Если же использовать не npm, а yarn - добавляются ещё удобные варианты:
    1. yarn workspaces: вы кладёте несколько ваших модулей\приложений в один реп, и yarn собирает все зависимости в один node_modules и линкует использующийся модули туда же. В итоге отсутствует дубликация файлов и все модули работают с одними и теми же либами - что полезно в деве если используется расширение сторонних модулей. Очень удобно.
    2. yarn link: это чисто локальная фишка для разработки, вы делаете yarn link в корне одного модуля и он регистрируется глобально, после чего в другом модуле где хотите использовать делаете yarn link "имя" и он линкуется.
    Ответ написан
    1 комментарий
  • Vue - как встроенное приложение?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если не нужна поддержка IE11 и Safari - можно использовать web-компоненты и просто подключать стили внутри компонента - они инкапсулируются, иначе придётся покорячиться.

    Как это сработает с vuetify не скажу, но в похожей ситуации я использовал postcss-prefix-selector, просто добавив с помощью него короткий класс-префикс для всех стилей либы. Соответственно этот класс назначаешь на контейнер с vue и, при удаче, всё заработает.)

    Мне, увы, там ещё кастомный трансформ пришлось добавить для корневых (body, :root и т.п.) селекторов, попатчить саму либу местами и проследить чтобы теперь основные стили сайта не перебивали классы либы, но это уже отдельная история.)

    P.S. Для работы postcss-prefix-selector с vue-cli не обязательно вручную вкорячивать loader, можно его просто добавить в .postcssrc.js в plugins:
    require('postcss-prefix-selector')({
        prefix: '.prefix'
    }),
    Ответ написан
    2 комментария
  • Как проверить на пустоту значения, например obj.field.text. Здесь field пустой и text. Какие способы есть?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Во-первых: typeof obj.field.text === 'undefined': typeof даёт строку.

    Самое свежее это: if (obj.field?.text === undefined) если obj есть, и соответственно if (obj?.field?.text === undefined) если неизвестно.

    Если нужна поддержка всяких IE и Safari - то только по старинке, по очереди:
    if (!(typeof obj.field !== 'undefined' && typeof obj.field.text !== 'undefined' ))
    Или использовать функцию-хэлпер, например if (get(obj, 'field.text') === undefined) из lodash.
    Ответ написан
    Комментировать
  • Каким способом вы определяете тип функции в вашем приложении?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну IDE тебе подскажет при вводе.)
    А что вводить - ты должен знать и так: ты же знаешь с чем функция твоя работает.) Если потенциально по логике твоя функция должна работать с чем-то ещё, но ты об этом не знал на момент написания, то значит ты не предусмотрел этого и внутри функции тоже, а значит отсутствие указанного типа только в плюс.
    Поизучать типы можно полазив по .d.ts соответствующих либ. IDE и тут поможет: ctrl+тык на имеющуюся функцию откроет её декларацию.

    В целом же в TS структурная типизация, тебе не надо знать с какими именами типов работает пользователь, тебе надо лишь указать структуру нужного типа.
    Ответ написан
    Комментировать
  • Нужно ли что-то учитывать в дизайне под Materialize?

    Aetae
    @Aetae
    Тлен
    >извращенные фантазии заказера
    А ты собрался рандомный дизайн по своему вкусу пилить?)

    Идёшь в левую менюшку и смотришь, что тебе предлагает данная система и далее в дизайне по максиму используешь её возможности и по-минимуму сложную отсебятину.
    В первую очередь тебе нужны Components: для задач решаемых конкретным компонентом использовать следует именно этот самый компонент, не меняя его дизайн за рамками предоставляемых системой возможностей. Весь остальной дизайн должен, очевидно, придерживаться гайда Material Design и сочетаться с имеющимися компонентами.
    Случаи кастомизации компонентов - отдельно оговариваются с заказчиком.
    Случаи отклонения от гайда - отдельно оговариваются с заказчиком.

    Насколько это всё строго и сколько может позволить себе заказчик верстать твоего творчества вместо использования готового конструктора из компонентов с минимальными правками - отдельно оговаривается с заказчиком.)
    Ответ написан
    Комментировать
  • Почему округление до целого числа получается с ошибкой js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ответ на вопрос: потому что используются числа с плавающей точкой.
    Если нужно округлённое число - округляйте непосредственно перед использованием\выводом. Любая математическая операция может добавить немного "мусора" при определённых условиях.
    Ответ написан
    1 комментарий
  • На что влияет запись стилей разными способами?

    Aetae
    @Aetae
    Тлен
    Категорически не согласен с ответом человека-обфускатора The Wizard of Oz.
    Запись в одну строку гораздо менее читаема, сложнее в изменении, и несёт в себе ненужные побочные эффекты(если нужно на самом деле только что-то одно).
    Наглядная полная запись любых свойств - гораздо проще как для восприятия, так и для изменения.

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

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Возможно ак:
    const {current}: {current: HTMLUListElement} = children;

    или так:
    const current = children.current as HTMLUListElement;

    Вы же задаёте тип не current, а всего объекта.

    P.S. Про ts-ignore забудьте.
    Ответ написан
    Комментировать
  • Как переделать массив объектов?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Один проход, но в каждом узле будет children даже если пустой:
    function unFlatten(array) {
      const childrenMap = Object.create(null);
    	for(const item of array) {
        if(item.parent in childrenMap) 
          childrenMap[item.parent].push(item);
        else
          childrenMap[item.parent] = [item];  
        
        if(!childrenMap[item.id]) childrenMap[item.id] = []; 
        
        item.children = childrenMap[item.id];
      };
      return childrenMap[null]
    }

    Один-два прохода, как повезёт, но children только там где нужны.
    function unFlatten(array) {
      const childrenMap = Object.create(null);
      const secondPass = [];
    	for(const item of array) {
        if(item.parent in childrenMap) 
          childrenMap[item.parent].push(item);
        else
          childrenMap[item.parent] = [item];  
        
        if(item.id in childrenMap) 
          item.children = childrenMap[item.id];
        else
          secondPass.push(item)
      };	
      for(const item of secondPass) {
        if(item.id in childrenMap) 
          item.children = childrenMap[item.id];
      };
      return childrenMap[null]
    }

    Или от обратного:
    function unFlatten(array) {
      const map = Object.create(null);
      const secondPass = [];
      for(const item of array) {
        map[item.id] = item;
        if(item.parent in map) {
          if('children' in map[item.parent])
            map[item.parent].children.push(item)
          else
            map[item.parent].children = [item];
        } else {
          secondPass.push(item);
        }
      };
      for(const item of secondPass) {
        if(item.parent in map) {
          if('children' in map[item.parent])
            map[item.parent].children.push(item)
          else
            map[item.parent].children = [item];
        }
      };
      return secondPass
    }

    Любой вариант меняет исходные узлы(если надо - клонируйте), и не рассматривает случай когда цепочка родитель-потомок может быть сломана.
    Ответ написан
    Комментировать
  • Как из массивов получить объект?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Схема конечно кривая, но как-то так:
    function toObject(animals, titles, list) {
      animals = Object.fromEntries(animals);
      titles = Object.fromEntries(titles);
      return list.map(([animal, title, ...array], i) => ({
        id: i + 1, 
        title: titles[title], 
        animal: animals[animal], 
        array
      }));
    }
    
    toObject(arr1, arr2, arr3);
    Ответ написан
  • Продуктивно ли подобное обучение?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Возьми более базовые книги: по алгоритмам, паттернам, структурам, подходам итд. Не привязанные к конкретному языку. Это всегда будет полезно, и не потребует кодинга для практики.
    Эффективное же изучение конкретного языка - это наоборот чистая практика, чтение там должно идти только параллельно по мере необходимости.
    Ответ написан
    4 комментария
  • Как подключать разные файлы sass переменных для одного проекта на Vue?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Переменные удобнее всего подключать глобально через prependData.
    Соответственно и менять удобно в одном месте. По условию или ещё как.

    А вот как у вас три проекта в одном репозитории - вопрос отдельный.
    Ответ написан
    Комментировать