• В поле какого типа передавать на фронтенд расшифровку статуса: строка или 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 комментариев
  • Как принудительно уменьшить размер окна меньше допустимого?

    Aetae
    @Aetae
    Тлен
    Actual Window Manager - большой комбайн позволяющий творить с окнами что угодно, в т.ч. и уменьшать.
    AutoHotkey - инструмент для автоматичзации работы со всем в винде через скрипты, в т.ч. позволит уменьшить конкретное окно.
    Ответ написан
    Комментировать
  • В чём ошибка js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ни в чём. Ошибка у тебя скорее всего в html, который ты не привёл.
    // разве что чтоб шаблоны в строках работали надо использовать ` а не ".
    Ответ написан
    4 комментария
  • Как сделать так чтобы inline фоновая картинка была видна только в дочерних блоках?

    Aetae
    @Aetae
    Тлен
    Боль-мене универсально с помощью clip-path и трюка с позиционированием:
    Ответ написан
    Комментировать
  • Как поменять через React-код background-image в зависимости от условия if-else?

    Aetae
    @Aetae
    Тлен
    Во-первых: зачем ты лезешь в dom руками через ref? Пиши в state и используя значение в свойстве style компонента. Или даже не в state а тупо в переменную.

    Во-вторых: чтобы сборщик обработал картинку из хрен пойми откуда - надо её импортировать через import и уже потом подставлять результат.
    Однако если картинка лежит в public, это не обязательно, можно прям на неё ссылаться от корня. Только посмотри где она действительно лежит: если лежит в /public/img/morning.jpg, то писать надо соответственно '/img/morning.jpg без всяких assets и наоборот.
    Ответ написан
    Комментировать
  • Как изменить переменную (массив) из другого модуля в javascript?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Это так и работает. Массив передаётся по ссылке. Задача решена.

    P.S. Проблемы тут могут возникнуть только при работе с многопоточностью в node, где в каждом потоке своя версия модуля, либо в случае если в дереве зависимостей окажется несколько разных версий. Но это отдельные случаи и задачи.
    Ответ написан
    Комментировать
  • Как выполнить действие до события DomContentLoaded?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Нет. (с оговорками, но не в твоём случае)

    Просто измени шаблон index.template.html и добавь туда в head тупо
    <script>
    window.YandexRotorSettings = {
            WaiterEnabled: true;
            FailOnTimeout: false;
            NoJsRedirectsToMain:true
    }
    </script>

    (ну либо любой иной шаблон в который ты подключаешь vue)
    Ответ написан
  • Зависает на запросах после сборки через webpack?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Возможно дело в том что не вынесены node модули как внешние:
    const nodeExternals = require('webpack-node-externals');
    {
      // ...
      externals: [nodeExternals()],
    }


    Если это не поможжет, то отключи все плагины и оптимизацию.
    Не заработало?
    Сделай тестовый файлик с одним единственным методом, собери и посмотри на результирующий код - подебаж его руками и разберись в чём дело.

    Работает?
    Подключай плагины по одному пока не найдёшь виновника и разбирайся с конфигом оного.
    Ответ написан
  • Как правильно сделать привязку данных к динамически созданному элементу в Vue?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если работаешь с vue - тебе не нужно трогать dom руками и наоборот.
    v-html только для статических каких-то данных.

    Вот это вот <b class="aaakjhij" data="hk">jjj!!!!</b> должно быть уже в шаблоне. Если надо по условию - то использовать v-if или v-for если несколько.
    Примерно так:
    <script>
    export default {
      data() {
        return {
          data: 'hk',
          text: 'jjj!!!!',
          show: false
        }
      },
      methods: {
        _jjj(){
          this.show = true
          this.data = 'hk';
          this.text = 'jjj!!!!';
        },
       _kkk(){
          this.data = 'ooooooooooo';
          this.text = 'ha-ha-haaaa!!!'
        }
      }
    }
    </script>
    
    <template>
      <div>
        <b v-if="show" :data="data">{{text}}</b>
      </div>
      <button @click="_jjj">11</button>
      <button @click="_kkk">12</button>
    </template>

    Тебе надо перестать мыслить в jquery и начать мыслить в vue.

    Если всё ещё остаются проблемы - опиши конкретную конечную цель, которой ты хочешь добиться, не в виде кода, а в виде результата и условий.
    Ответ написан
    3 комментария
  • Как в react-router-dom сделать чтобы loader не блокировал рендер страницы?

    Aetae
    @Aetae
    Тлен
    Сам не пользовался, но по докам вроде никаких магических параметров не вижу.

    Вот тебе тогда вспомогательные функции которые сделают то, что тебе надо:
    import { json, useLoaderData } from "react-router-dom";
    import { useEffect } from "react";
    
    export function eagerLoader(loader) {
      return (...args) => {
        const promise = loader(...args)
          .then(res => res instanceof Response ? res.json() : res );
        return json({ promise }, { status: 200 });
      }
    }
    
    export function useEagerLoaderData(defaultData) {
      const [data, setData] = useState(defaultData);
      const promise = useLoaderData()?.promise;
    
      useEffect(() => {
        promise?.then(setData);
      }, [promise]);
    
      return data;
    }
    let route = {
      path: "...",
      loader: eagerLoader(({ request }) => ...),
      lazy: () => import("./Comp"),
    };
    
    const Comp = () => {
      const data = useEagerLoaderData([]);
    
      //...
    }

    Код не проверял, но думаю логика очевидна.:)

    P.S. defaultData мб стоит вынести в обёртку eagerLoader, хз, тут сам смотри свои юзкейсы.:)
    Ответ написан
    1 комментарий
  • Как сделать закругленну обводку текста?

    Aetae
    @Aetae
    Тлен
    Как-то так:
    -webkit-text-stroke: 15px rgb(18, 235, 203);
    paint-order: stroke fill;

    Работает только в свежих версиях браузеров.

    Для старья можно попробовать имитировать с помощью svg-фильтра: morphology dilate и заполировать gaussianblur, но там придётся поиграть со значениями.
    Ответ написан
    Комментировать
  • Как сделать типизацию под случай undefined в объекте?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Никак. Тип undefined не может быть ключом в принципе.
    Из вариантов:
    1. Убедиться что ключ не undefined руками:
    card = card_id && this.cards[card_id];
    2. Заставить ts думать, что ключ есть даже если его нет(и взять на себя ответственность за возможные ошибки):
    card = this.cards[card_id!];
    3. Явно привести к строке:
    card = this.cards[String(card_id)];
    Ответ написан
    5 комментариев