• Возможно ли получить тип пропсов у child?

    neuotq
    @neuotq
    Прокрастинация
    Немного не ясно что вы хотите, вот это получать?
    type ReturnElementProps<T> = T extends React.ReactElement<infer P> ? P : never;
    
    type FormItemProps<
      C extends React.ReactElement,
      P extends ReturnElementProps<C>
    > = {
      getValueFromEvent: (...args: Parameters<P["onChange"]>) => void;
      children: C;
    };
    
    const FormItem = <
      C extends React.ReactElement,
      P extends ReturnElementProps<C>
    >(
      props: FormItemProps<C, P>
    ) => {
      // из пропсов вашего компонента берём дочерний элемент
      const { children } = props;
      // из пропсов дочернего берем onChange
      const { onChange } = children.props;
      //тест
      console.log("Child onChange cb", onChange.toString());
      return children;
    };
    
    export default function App() {
      return (
        <div className="App">      
          <FormItem getValueFromEvent={(event) => event}>
            <input onChange={(e) => console.log("Children e", e.target.value)} />
          </FormItem>
        </div>
      );
    }
    Ответ написан
    4 комментария
  • Laravel + Inertia. Как настроить формат JSON?

    neuotq
    @neuotq
    Прокрастинация
    Inertia конечно же не избавляет от процесса рендера на клиенте, эта библиотека убирает не нужную(там где она не нужна) возню и прослойку в виде api, позволяя строить номодный фронтенд в прямой связи с классическим бекендом. Если вам нужен серверный рендер, то такая опция есть, но нужно будет ставить и настраивать SSR и node на сервере. После этого частично рендер будет происходить на сервере(по аналогии как это в фреймвораках типа Nuxt/Next).
    Либо же взглянуть на совсем иной подход в виде Livewire, где мы получаем ту же "реактивность" и прочее, но обмен данными уже идет в виде блоков html. Что кстати более логично если мы строим приложение вокруг веба, без разделения на API/бэкенд - фронтенд. Как бы апгрейд классического подхода, зачастую имееющий МНОГО плюсов, если не собираетесь строить сильный API, кучу разных приложений для него и тп. А всё будет вокруг веба.
    Ответ написан
    Комментировать
  • Как убрать лишний "мусор" при всталвке из word в CKeditor 5?

    neuotq
    @neuotq
    Прокрастинация
    Для этого используйте фичу по вставке из офиса.
    https://ckeditor.com/docs/ckeditor5/latest/feature...

    Добавить в плагины:
    //****
     // CKEditor
        ClassicEditor.create($('#data')[0], {
            htmlSupport: { allow: htmlSupport },
            removePlugins: [ 'Link', 'SourceEditing' ],
            plugins: [ PasteFromOffice],
            fontSize: { options: [ 8, 10, 12, 14, 18, 20, 24, 28, 36 ] },
        })
        .then(editor => {
            CKEditor = { field: 'data', data : editor };
        })
        .catch(error => {
            console.error(error);
        });
    Ответ написан
    Комментировать
  • Как исправить Ошибки при ajax запросов в vk api?

    neuotq
    @neuotq
    Прокрастинация
    dataType: 'JSONP' - почему JSONP? Удалить или заменить на json. Так же там может вылетать ответ с лимитом обращений к api.
    Ответ написан
  • Как определить грань межу использованием nuxt и использованием привычных решений вроде express для backend-части?

    neuotq
    @neuotq
    Прокрастинация
    Изначально nuxtjs(и его вдохновитель nextjs) - фреймворки, которые представляют собой готовый рецепт и набор правил для построения приложений на библиотеке Vue.js или React. Хотя можно обойтись без них и строить приложения как душе угодно, но удобнее иметь набор правил в сообществе и в команде. В процессе разработки фронтенд-приложений постепенно появляется необходимость в различных оптимизациях, в том числе в скорости и SEO, поэтому активно развивается бэкэнд для фронтенда. Он используется в основном для дополнительного кеширования и рендеринга на стороне сервера.

    Конечно, вы можете подключаться к базе данных для получения информации. Для этого есть специализированные плагины и практики(можно прям гуглить nuxt 3 mysql). В целом, у вас есть доступ ко всем возможностям Node.js, так что всё в ваших руках. Чаще всего используются какие-либо ORM (Object-Relational Mapping), которые облегчают доступ к БД, убирая рутину на себя и предоставляя удобный доступ к данным. Например, Prisma.

    В целом, обычно в Nuxt.js и подобных фреймворках напрямую с БД не работают, так как это ломает классическую архитектуру подобных приложений с разделением логики, масштабирования и т.п. Так что даже если на бэкенде Node.js, то это отдельные независимые сервисы, которые предоставляют каким-либо образом доступ к подготовленным данным из БД (например через REST API), а уже приложение на Next.js обращается к нему и в своей бэкенд-части и через браузер.

    Резюмируя: Nuxt - для отображения интерфейса/фронтенда, даже при использовании рендринга на стороне сервера, получение обновление данных через API(REST/GraphQL/... ).
    Express/Nest(что угодно другое бэкэндерское) - ядро бизнес логики, обработка данных, работа с БД, постороение API и тп.
    Это если кратко, а так гуглите про архитектуру приложений, информации море, тема обширная.
    Ответ написан
    1 комментарий
  • Я тут таймер сделал, но почему то когда я переключаю окно на что-то другое, таймер останавливается. В чем проблема?

    neuotq
    @neuotq
    Прокрастинация
    Так задумано. Неактивные вкладки имеют низкий приоритет, поэтому там не гарантируется исполнение в риалтайме js.
    Выход переписать например на webworker.
    В целом тема обширная, можешь гуглить JavaScript inactive tabs
    Ответ написан
    1 комментарий
  • Как после исполнения команды `Fetch origin` в `GitHub Desktop` вернуть локальные изменения в GitHub?

    neuotq
    @neuotq
    Прокрастинация
    Команда git fetch просто скачивает изменения, не применяя их. А вот git pull делает fetch, а затем уже rebase/merge.
    Поэтому если вы сделали просто fetch, то не должны были потерять ваши локальные незакомиченные изменения.
    Короче говоря, всё должно было сохраниться. Если только выполнилась команда fetch.
    Ответ написан
  • Как запретить сжатие блока по ширине при фиксированном позиционировании?

    neuotq
    @neuotq
    Прокрастинация
    Ну так у вас ширина bonus_window не задана его, те фактически блок на всю доступную ему ширину. Ширину уменьшается, блок соответственно тоже будет сжиматься.
    Делайте ему жесткие размеры ширины bonus_window, можно даже добавить и ключи по media queries для разных размеров экрана.
    Ну и лучше позиционировать по правому краю, чтобы не заходил блок за пределы экрана, либо тогда учитывать это в тех же media queries, зная под какую ширину экрана, какой размер блока(и конечно же внутренних элементов) вас устроит.
    Ответ написан
    Комментировать
  • Как отключить скролл страници при фокусе определенного элемента?

    neuotq
    @neuotq
    Прокрастинация
    Вам нужно следить за событиями keydown, далее снимаем действие по умолчанию с помощью preventDefault.
    Таким образом в самом общем случае отключения реакции на все кнопки будет:

    document.addEventListener('keydown', e => {
      e.preventDefault();
      return false;
    });


    Далее ищите нужные коды для своих кнопок, отключаете поведение по умлочанию, добавляете своё поведение.
    Например:

    document.addEventListener('keydown', e => {
       if (e.key === 'ArrowDown') {
        e.preventDefault();
        //Ваша логика
        return false;
      }
    });
    Ответ написан
    Комментировать
  • Что значат цифры 5200 в спецификации процессора AMD 7600X?

    neuotq
    @neuotq
    Прокрастинация
    5200 - официально, те то что гарантирует производитель.
    Но энтузиасты, геймеры разгоняют память до 6000, работает без проблем.
    У AMD это технология EXPO, есть даже список официальный поддерживаемых модулей с частотами разгона. Я думаю есть и не официальные, на форумах/группах энтузиастов оверклокеров.
    Ответ написан
  • Нужен ли отдельный linux user для сайта?

    neuotq
    @neuotq
    Прокрастинация
    Практик очень много, тут лучше идти в сторону лучших практик от devops, это большая тема, но полезная.

    Но если упрощенно и по старинке и быстро.
    1. Доступ на сервер только по ssh ключам, никаких паролей.
    2. Отдельный момент по sudo
    2.1 Для пользователя админа в целом оставляем запрос пароля на sudo
    2.2 Для сервисных аккаунтов(условные www-data и компашка,которые для служб, сервисов, автоматика того же ларавел) делаем sudo без пароля для избранных команд/программ. Таким образом автоматизация будет работать сама, независимо и стабильно.
    3. Бонус пункт. Подумать о переходе на докер контейнеры на сервере, многие штуки упрощаются. Можно начать с интеграции того же laradock как самый быстрый и лёгкий старт.
    PS почему rsync? Почему хотя бы не скрипты которые фетчат гит репо. rsync для некоторых сценариев бекапа еще понятно, но для деплоя кода ну не знаю. Более прозрачная схема через гит и билд на сервере. В крайнем случае в тот же гит можно и сбилженные релизы добавлять и их разворачивать на сервере.
    Ответ написан
  • Мертвы ли шаблонизаторы?

    neuotq
    @neuotq
    Прокрастинация
    Легкое гугление вам покажет что это не так, даже из устаревшего списка много кто живой и развивается.
    Но зачастую сами шаблоны сильно зависят от архитектуры и целей приложения. В мире JS с своими SSR React/Vue и ко в купе с тем что node все ближе по похожести на браузерный js, то вопрос разных шаблонизаторов не стоит столь остро. В реакте с его JSX и прочими штуками зачем мне pug, там даже особо код и читабельнотсь не улучшится. А по функционалу тем более, ну и плюс лишняя зависимость. Ну и подобная логика в других проектах.
    Так чо шаблонизаторы живы, умирают не нужные. Много где есть свои встроенные штуки. В любом случае на чистом html) пишут редко, либо что-то мелкое.
    А во многих других фреймворках/языках с ними всё ок, развиваются активно.
    Ответ написан
    Комментировать
  • Как при клике убрать активный класс?

    neuotq
    @neuotq
    Прокрастинация
    Немного упростим главный код и исправим названия класса.
    Активный класс, если это БЭМ или типа БЭМ, должен быть не _active, а fits-cars-showmore-content_active, ну и с остальными соответственно.
    Так же разделим название для data атрибутов, чтобы у кнопок и контента они различались, так желательно в данной семантике. Либо в дата атрибут передавать айди кого будем дёргать. Тут уже на усмотрение разработчика в зависимости от дельнейшего пути
    Сам цикл упростим (но желательно конечно вернуть/добавить проверки аргументов, существования элементов и тп, я убрал для наглядности.).
    const autoBtns = document.querySelectorAll('.block-tabs-main-home__item');
    	autoBtns.forEach(
        btn => {
          btn.addEventListener("click", (e) => {			
            const contentId = btn.getAttribute("data-content-id");     
            document
                .querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`)
                .forEach( (el) =>
                  el.classList.toggle('fits-cars-showmore-content_active')
                )
    	        }
          );
        }
      );

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

    neuotq
    @neuotq
    Прокрастинация
    Ставьте ему фокус насильно после смены "режима".
    document.getElementById("myPasswordField").focus();

    Это строку, с вашим айди поля, добавьте после строчки со сменой режима. Возможно там уже тем или иным способом находится элемент инпута, тогда просто у этого элемента вызвать метод focus()
    Ответ написан
    1 комментарий
  • Почему переменная не меняет значение, если обернуть действие в функцию?

    neuotq
    @neuotq
    Прокрастинация
    В первом случае происходят простое прямое изменение переменной existence1, вы там напрямую к ней обращаетесь и меняете значение.
    Во втором случае в момент вызова addcartProduct(existence1) значение в переменной existence1 копируется и дальше используется внутри функции addcartProduct в переменной num. При передаче параметров переменные в javascript копируются по значению, те создаётся новая переменная и туда копируется значение из переденной в параметре(есть нюансы с объектами!). Во многих язык программирования есть инструменты позволяющие передавать переменную по ссылке, но javascript такого не поддерживает.
    Поэтому будем использовать нюансы передачи значения в переменных объектах(и массивах).
    Если огрубить, то при создании объекта в js сам объект создаётся где-то в памяти, а в переменную помещается идентификатор(ссылка) на то что это за объект. Так вот, при передаче объекта в функцию, в локальную переменную внутри копируется именно это значение(а не поля и элементы как кажется), поэтому переменная внутри функции хоть и другая, но ссылается на этот же объект в памяти.
    Поэтому если мы изменим свойства этого объекта, то они поменяются и в оригинале. При это если бы эту локальную переменную перепишем(например создадим новый объект) то внешняя переменная не изменится, ведь во внешней осталась оригинальная ссылка на старый объект, а во внутреннем будет новая уже.
    Кажется непонятным, но все просто если понять что у объектов(и массивов) значение переменной это айди объекта в памяти, а переменные в js передаются всегда по значению, поэтому всё логично.
    Итак перепишем ваш пример, чтобы мы могли менять значение снаружи из функции через локальную переменную.

    //Объекты обычно объявляют как константы, чтобы случайно не переписать сам объект
    //при это свойства объекта менять можно
    //потому что константа это значение переменной - ссылка на объект в памяти
    const existence1=  { 
    value: false
    };
    
    function addcartProduct (num) {
      if (num.value) {console.log('+1')}
        else {
          console.log(num)
          num.value = true;
        }
    }
    
    //false
    console.log(existence1.value)
    
    addcartProduct(existence1);
    //true
    console.log(existence1.value)
    Ответ написан
    Комментировать
  • Как передать значение свойства в ::before класса динамически?

    neuotq
    @neuotq
    Прокрастинация
    В целом если такое происходит повод избавиться от псевдоэлемента, в подобных случаях почти всегда это можно сделать заменив его на настоящий с теми же свойствами.
    В свойстве style нельзя обращаться к псевдоэлементам, поэтому для интерактивности в схожем стиле можно использовать styled components:
    Где-то в ваших стилях:
    .testClass {
      font-size: 1.5em;
      text-align: center;
      color: #bf4f74;
    }
    
    .testClass::before {
      content: 'QQ';
      position: absolute;
      top: 10px;
    }

    В компоненте:
    // ... 
    const [textColour, setTextColour] = useState('blue');
    const TestElement = styled.h1`  
      &:before {
        color: ${textColour}
      }
    `;
    
     return (
        <>  
      <button
              onClick={() =>
                setTextColour((color) => (color === 'black' ? 'red' : 'black'))
              }
            >
              Change color of :before
            </button>   
          <Title TestElement="testClass"> HELLO </Title>
        </>
      );

    Таким образом можно будет менять интерактивно свойства псевдоэлемента.
    Ответ написан
    4 комментария
  • Зачем нужен второй интерфейс в определении класса, если первый интерфейс - наследник второго?

    neuotq
    @neuotq
    Прокрастинация
    Serializable много может быть разных ещё, и чтобы не плодить классы для некоторых проверок используют маркер интерфейсы, которые с одной стороны не навредят, а другой стороны сократят код и позволят сделать проверки типов где нужно для различных операций при всяких там наследованиях. Погуглите Marker Interfaces

    Там прямо в комментах написано:
    /**
     * A marker interface for entity reference classes.
     * <p>
     * This is used primarily as a means of ensuring type safety in collections
     * of mixed type references.
     * 
     * @see org.alfresco.service.cmr.repository.NodeService#removeChild(NodeRef, NodeRef)
     * 
     * @author Derek Hulley
     */
    Ответ написан
    2 комментария
  • Почему при работе с inertia на сервере идет обращение к локальным адресам?

    neuotq
    @neuotq
    Прокрастинация
    Судя по всему идёт обращение словно бы dev сервер vite запущен. Он как раз по умолчанию порт 5173.
    При выкатке приложения на продашн сервер нужно сделать npm run build, чтобы построить фронт.

    Либо альтернативно билдить на локалке, но тогда нужно изменить штатные .gitignore файлы, чтобы не игнорировалась папка public/assets/build (hot пусть игнорируется) и его тоже коммитить. И уже собранный фронт деплоить на сервер без сборки.

    Ну и не забываем проверять наш .env на установку всех нужных перемнных, а так же очистку кеша и тп
    Ответ написан
    3 комментария
  • Как сделать перевод динамических данных с БД laravel-vue-i18n?

    neuotq
    @neuotq
    Прокрастинация
    Советую не мучатся делая свой велосипед и использовать пакет типа https://github.com/spatie/laravel-translatable .
    Если не хочется прям привязываться к их реализации можно взять лайт версию этой идеи:
    • в базе поля что будут мультиязычными хранить в json
    • создать свой аналогичный трейт с мутаторами eloquent что будут брать и возвращать нужное значение на основе локали(можно акссесорами и другими способами, но будет не так "красиво")
    • добавить разных хелпер функций по вкусу.
    • Профит.

    Почитайте код пакета выше, там всё просто в целом.
    Ответ написан
    Комментировать
  • Как работать с Vite в Laravel?

    neuotq
    @neuotq
    Прокрастинация
    В исходном коде должно быть что-то вроде этого:
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    А уже дальше, в зависимости от контекста окружения, запущен ли dev сервер vite и тп будет то что вы написали(в самом браузере).
    Тот код что вы прислали обычно при запущенном дев сервере(тот что npm run dev).
    Если команда npm run build выполнена успешно, и код выше(тот что с @vite) в основном layout присутствует, то вам не о чем беспокоится. Для проверки остановите дев сервер и проверьте код в браузере, он должен изменить пути в соответствии с настройками, обычно подставляя хост из .env переменной APP_URL и у вас будет нечто вроде(на локальной машине с APP_URL=http://localhost )
    <!-- Scripts -->
    <link rel="preload" as="style" href="http://localhost/build/assets/app.2c8c25ff.css" />
    <link rel="modulepreload" href="http://localhost/build/assets/app.d7d1b58b.js" />
    <link rel="stylesheet" href="http://localhost/build/assets/app.2c8c25ff.css" />
    <script type="module" src="http://localhost/build/assets/app.d7d1b58b.js"></script>
    <!-- Styles -->

    На сервере или в другом окружении с другим значением APP_URL вместо http://localhost будет иное значение.
    Ну и о дополнительной и особой настройке можно почитать в официальной документации.
    Ответ написан
    Комментировать