Задать вопрос
  • Какая альтернатива AVIFS поддерживается в iOS?

    Aetae
    @Aetae
    Тлен
    APNG, HEVC, возможно Webp, но тут не уверен.

    А без устройства - гиблое дело. Если планируешь этим занимать на постоянке - купи хотяб какой-нить убитый бушный с разбитым экраном.)
    Ответ написан
    Комментировать
  • Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну потому что во весь экран ты разворачиваешь само video, а надо videoplayer целиком: при фулсскрине на элементе ничего кроме этого элемента и его содержимого как бы не существует.

    P.S. Ты пытаешься вызывать префиксные webkit и moz requestFullscreen, а чистый по стандарту requestFullscreen даже не пробуешь. Не надо так.
    Ответ написан
    Комментировать
  • Как проверять токен при каждом запросе в rtk query?

    Aetae
    @Aetae
    Тлен
    Ответ Антон Иванов - популярный костыль, но от того не менее ошибочный.
    Токен имеет время жизни. Это время жизни можно достать на клиетне из самого токена.
    Правильное решение - просто по таймеру за 5-15 минут до устаревания обновлять оный в фоне. В таком случае все нормальные запросы вообще не затронуты.
    Чуть менее правильное - проверять на устаревание при каждом обращении к токену и если устарел прямо тут же, в процессе, получать новый.
    Все популярные библиотеки умеют это из коробки.
    Ответ написан
    1 комментарий
  • Как в nuxt ограничить доступ к компонентам в зависимости от прав авторизованного пользователя?

    Aetae
    @Aetae
    Тлен
    Сможет конечно. Факт в том что всем на это пофиг. Нет на фронте таких компонентов, которые надо секретить. Просто нет. Все секретные данные на бэке и их получение ограничено. Соответственно если секретный компонент выводит секретные данные - то он просто ничего не выведет.

    Однако если очень хочется - то можно нашаманить, например сделать маршрут и компонент ssr-only и зафорсить полноценный переход по такому маршруту, соответственно заблокировав на бэке. Или настроить, чтоб компонент всегда собирался в отдельный чанк с конкретным именем, и опять же, заблокировать скачивание этого чанка без авторизации.

    В любом случае любая безопасность - это бэк, а фронт - это только видимость для удобства.
    Ответ написан
    2 комментария
  • Может ли злоумышленник вставить в ссылку js код?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если код твоего сайта самописный - скорее всего да. Если используется какая-то готовая система - скорее всего нет.

    Любой ввод пользователя надо очищать от всего потенциально опасного. Называется sanitize - гугли "sanitize <твой язык или ситуация>" и используй найденные библиотеки с нормальной поддержкой.

    Есть множество неявных способов вставить код на страницу, просто <sctipt> и href="javascript:" - далеко не единственные, так что самостоятельно велосипед-санитайзер пилить крайне не рекомендую.
    Ответ написан
    5 комментариев
  • Как подключить Vue3 к Bitrix шаблону компонента и вывести рекурсивный список?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Я так понял до сих пор вы использовали vue вообще без компонентов - что есть в шаблоне - то и рисуется. Таким образом вы теряете 99% пользы и удобства vue.

    Конечно же можно создать в tamplate компонент, прямо там его добавить в vue и горя не знать.

    Просто делаешь рекурсивный компонент:
    var RecursiveComponent = {
      name: 'recursive-component',
      props: ['i'],
      setup() {
        const open = ref(false)
        return { open }
      },
      template: `
        <div>
          <recursive-component v-if="open" :i="i ? i+1 : 1"></recursive-component>
          <button @click="open=!open">toggle {{i}}</button>
        </div>
      `
    }

    И просто его используешь:
    Vue.createApp({
      components: { RecursiveComponent },
      setup() {
        return {
          message: 'Привет Vue!'
        }
      }
    }).mount('#app');
    
    <div id="app">
      {{ message }}
      <recursive-component></recursive-component>
    </div>


    P.S. Теоретически вместо строки в template вы действительно можете забуфферизировать вывод через ob_start, положить в переменную, а потом эту переменную положить в template. Но насколько я помню в битриксе не всё так просто с буферизацией и не факт что оно заработает и ничего не сломает...
    Ответ написан
    Комментировать
  • Как включить авто импорт nodejs модулей?

    Aetae
    @Aetae
    Тлен
    Максимум что можно сделать это включить автомипорт однозначных модулей при использовании тайпскрипта:
    67439068ca97c475077931.png
    Но это по больше части мелочь, т.к. большинство имён экспортов неоднозначны(т.е. имеются в нескольких пакетах).

    Так что используй Alt+Enter как и все мы, и не придумывай.:)

    ...upd:
    Есть, конечно, вариант как например в nuxt\next - задекларировать один файлик с глобальными импортами часто используемых модудей на уровне typescript и потом на этапе сборки добавить импорты там где они используются. Но это такое себе - красивее особо не сделает, т.к. большая часть портянки импортов - всё равно другие твои модули, от которых никуда не уйдёшь, а не глобальные пакеты, но вот запутать может.

    ...upd2:
    Так, погоди ка, перечитал вопрос ещё раз. Ты же не хочешь сказать, что я неправильно понял вопрос изначально, и ты пытаешься импортировать модули из node_modules В package.json? Если так, то Everything_is_bad, увы, прав: package.json- это источник модулей, а не наоборот. Ты берёшь package.json, делаешь npm i и node_modules наполняются указанными модулями. Потом делаешь npm i <имя модуля> и он в первую очередь добавляется в package.json а потом уже node_modules. Как ты получил node_modules без package.json? Тоже руками? Не надо так.
    Ответ написан
    Комментировать
  • Как прокинуть данные из одного дочернего компонента в другой?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Собственно взаимодействие меж несвязанными компонентами осущетвляется следующими способами:
    1. В простых случаях обычный vue-flow: вверх до общего родителя события через $emit и @on, вниз props.
    2. Общее хранилище в рамках всего приложения: pinia, vuex.
    3. Для связки детей которые не могут жить без конкретного родителя можно использовать: provide \ inject.
    4. Для плотной связки единичных компонентов: просто отдельный reactive объект импортируемый в нужных компонентах. (использовать осторожно при SSR)

    Конкретно тебе, похоже, нужен п.2.
    Ответ написан
  • Почему не срабатывает горячая клавиша в расширение?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Можно попробовать так(раньше работало), но скорее всего убрали уже(не проверял):
    "open-last-window": {
      "suggested_key": {
        "default": "Ctrl + Shift + M"
      },
      "global": true,
      "description": "Открыть последнее свернутое окно"
    }

    Если не заработает - остаётся только просить пользователя ручками выбрать:
    6740c5103ef84675182753.png
    Ответ написан
  • Как отключить MSO в PHPStorm?

    Aetae
    @Aetae
    Тлен
    Editor - Emmet - CSS - Enable fuzzy search
    6740a068a24fe862093197.png

    6740a0446b0f8053817711.png
    Ответ написан
    Комментировать
  • В поле какого типа передавать на фронтенд расшифровку статуса: строка или enum?

    Aetae
    @Aetae
    Тлен
    Делают как на душу положит.
    Но по-хорошему надо исходить из того, чтобы минимизировать переплетённость и дублирование кода. Т.е. всё что может отдать бэк текстом - должен отдавать текстом, чтоб при каких-либо изменениях менять надо было только в одном месте - на бэке. Остальное, дублирование чего не избежать(к чему привязывается дополнительная логика на фронте, типа Status) - то минимизировать, задокументировать и ограничить возможность изменений.:)
    Ответ написан
    Комментировать
  • Бэкенд или фронтенд должен объединять таблицы по FK?

    Aetae
    @Aetae
    Тлен
    Если работа идёт всегда со всеми данными - отдельный бэк api не нужен.
    Если работа идёт с какой-то определённой выборкой(как бывает в 99% случаев), то запрос в любом случае нужен, потому что, чтобы получить соответствующие выборке значения из соседней таблицы, клиенту потребуется посылать уже массив id, что, внезапно, увеличит накладные расходы бэка, по сравнению с простеньким join'ом потребным для спец-api.
    Ответ написан
    Комментировать
  • Как обойти контроль просмотра видео на сайте образовательного ресурса?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Раз работает на 2х, значит в теории самый простой вариант:
    f12 - консоль
    document.querySelectorAll('video').forEach(video => video.playbackRate = 100500);
    Ответ написан
    Комментировать
  • Как зафиксировать курсор мыши на месте по зажатию кнопки?

    Aetae
    @Aetae
    Тлен
    Можно использовать ahk(v1.1) скрипт, примерно такой:
    #SingleInstance Force
    #Persistent
    
    F3::
      BlockInput, MouseMove 
      KeyWait, F3
      BlockInput, MouseMoveOff
    return

    Тут пока нажата F3 будет заблокировано движение мыши. Можно поменять F3 на любую иную клавишу или сочетание.
    Ответ написан
    1 комментарий
  • Как отключить блокировку текста?

    Aetae
    @Aetae
    Тлен
    Вот такой стиль позволит выделать текст:
    document.body.appendChild(
      Object.assign(
        document.createElement('style'), {
          innerHTML: `
            html {
              user-select:auto !important;
            }
            .acc-text {
              pointer-events: auto !important;
            }
            /* показываем html текст*/
            body .acc-text.acc-shadow-el {
              opacity: 1 !important;
            }
            /* прячем svg текст*/
            text:not(.cursor-hover text) {
             opacity: 0 !important;
            }
          `
        }
      )
    );


    Правило для uBlock(включает разрешение контекстного меню):
    academy.make.com##.acc-text:style(pointer-events: auto !important;)
    academy.make.com##html:style(user-select:auto !important;)
    academy.make.com##body .acc-text.acc-shadow-el:style(opacity: 1 !important;)
    academy.make.com##text:not(.cursor-hover text):style(opacity: 0 !important;)
    academy.make.com##+js(aeld, contextmenu)
    
    import.cdn.thinkific.com##.acc-text:style(pointer-events: auto !important;)
    import.cdn.thinkific.com##html:style(user-select:auto !important;)
    import.cdn.thinkific.com##body .acc-text.acc-shadow-el:style(opacity: 1 !important;)
    import.cdn.thinkific.com##text:not(.cursor-hover text)style(opacity: 0 !important;)
    import.cdn.thinkific.com##+js(aeld, contextmenu)

    Правда самого выделения не видно, но текст таки выделяется и копируется.:)
    Ответ написан
  • MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    А почитать что тебе пишет, а посмотреть что ты пишешь?=\

    Refused to apply style from 'https://localhost:3000/css/desctop/main_d.css.css%22%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this errorAI

    'https://localhost:3000/css/desctop/main_d.css.css%22%3E'

    main_d.css.css%22%3E


    res.send(`https://localhost:3000/css/desctop/${base}">`)
    `https://localhost:3000/css/desctop/${base}">`
    ${base}">
    ">


    У тебя в ссылке лишний "> из-за чего ссылка ведёт никуда, из-за чего сервер возвращает 404 страницу, которая html.
    Ответ написан
  • Ошибка с Babel при сборке Webpack?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Все пакеты связанные с babel обновил до последних версий

    А не надо было. Работает - не трогай.:)

    babel-core - старая версия семилетней давности, новая живёт тут: @babel/core.

    Когда ты обновил всё до последней - что-то осталось старое, что-то работает со свежим, и так просто хрен разберёшь. Верни как было и живи спокойно.
    Или же найди свежий нулевой пресет и перекинь проект на него, если так сильно хочется обновиться. Вручную же версиями библиотек жонглировать можно долго.
    Ответ написан
    3 комментария
  • Почему typescript не проверяет типы при использовании spread-оператора?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Потому что необходимое свойство value уже существует, а остальной мусор пофиг, т.к. в ts структурная типизация, т.е. под сигнатуру
    interface Props {
        readonly value: string;
    }
    подходит любой объект у которого есть value: string:
    const foo = {
        value: 'string',
        id: 'string'
    }
    const bar: Props = foo; // ok

    Как указал Alexandroppolus - проверка есть только при явном задании литерала:
    const bar: Props = {
        value: 'string',
        id: 'string' // err
    };
    Но это специальный случай - предполагается, что задавая литерал вы хотите задать именно объект указанного типа и никакой другого. Однако к парадигме структурной типизации используемой в ts это отношения не имеет, чисто quality of life фича.

    P.S. И да, это значит что в потенциале ты можешь сделать так:
    interface Props {
        readonly value: string;
    }
    interface Props2 {
        readonly value: string;
        readonly id?: number;
    }
    
    const foo = {
        value: 'string',
        id: 'string'
    }
    
    const bar: Props = foo; 
    const buz: Props2 = bar; 
    
    buz.id?.toFixed(2) // ts ok, runtime error :(
    Ответ написан
    Комментировать
  • Как сделать квадрат с стрелкой?

    Aetae
    @Aetae
    Тлен
    На макете нет никаких border, потому проще всего сделать обычным clip-path:

    А вот если таки понадобится border, то тогда уже придётся придумывать всякое.
    Ответ написан
    6 комментариев