• В каких случаях text-align применяется непосредственно к самому элементу, а в каких – к родителю?

    Aetae
    @Aetae
    Тлен
    text-align применяется к тексту. Вот и всё.
    h1 - блочный элемент и занимает всю ширину. Выравнивается текст внутри него, а не он сам.
    Ответ написан
    2 комментария
  • Как запустить фронт и бэк на одном адресе?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если тебе это нужно для разработки - то тебе это не нужно.)
    Используй webpack devserver(из коробки в vue-cli) и настрой proxy до бэка. Для фронта всё будет "на одном сервере" и не нужно никаких заморочек.
    Ответ написан
  • Как организовать структуру хранения javascrirpt-файлов для многостраничного сайта?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну например если использовать webpack - можно указать несколько entry. Он сам соберёт отдельно по чанку на каждую entry и общий чанк для всех. Ну и можно настроить по вкусу более углублённо если нужно. Другие сборщики тоже так могут, думаю.
    Ответ написан
    Комментировать
  • JavaScript как вытащить данные(json) из локального файла?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    url: "data.json")
    ...upd
    А нет, теперь и в FF не работает. Когда я последний раз что-такое делал - ff спокойно это кушал. Бесполезная "безопасность" добралась и до него.
    Ответ написан
  • Как правильно расположить текст?

    Aetae
    @Aetae
    Тлен
    text-align: center / align-items: center в зависимости от того на чём свёрстано. Но это самые основы основ, так что перед тем как что-то делать - вернись к изучению.
    Ответ написан
    Комментировать
  • Как выравнять данные иконки?

    Aetae
    @Aetae
    Тлен
    Обычный флекс, карточке flex-direction: column, последнему блоку с кнопками margin-top: auto и всё.
    Ответ написан
    Комментировать
  • Настройка range.slider?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Как указали вам в предыдущем вашем вопросе - вам нужна логарифмическая шкала, примерно так:
    Ответ написан
    5 комментариев
  • Как принудительно открыть декстопную версию внутри 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 и сочетаться с имеющимися компонентами.
    Случаи кастомизации компонентов - отдельно оговариваются с заказчиком.
    Случаи отклонения от гайда - отдельно оговариваются с заказчиком.

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