black1277

Примерно вот так:

Парковка элементов относительно друг друга через точки

    Point: 1|2|3|4
       topLeft     topRight
              1___2
              |   |
              |___|
              4   3
    bottomLeft     bottomRight

    Edges        1
               _____
              |     |
           4  |     |  2
              |_____|

                 3

    Point format:
      [targetPoint, itemPoint]

    Docking variants:
                [1,3]      [2,4]
                  __        __
    item   ->    |_3|______|4_|
    target ->       |1    2|
                  __|4____3|__
                 |_2|      |1_|

                [4,2]      [3,1]

        __
       |4_|___ __
     __|1    2|1_|
    |_3|4____3|
           |_2|

            __
     __ ___|_3|
    |_2|1    2|__
       |4____3|4_|
       |1_|

       1_________2
       |1_|   |_2|
       |__     __|
       |4_|___|_3|
       4         3

Я уже реализовывал кучу лет назад данный алгоритм для парковки элементов относительно друг друга с учетом всех важных факторов. И реализация на шарпе получилась объемом в 800 сотен строчек кода с комментариями, при этом сам алгоритм выбора точки - монстр в более чем 300 строчек кода и сплошной набор из пачки ифов глубиной до 6 и до 12 штук подряд, а так же набором свитчей тоже в количестве шести штук и глубиной до двух (местами внутри ифов). И это еще с учетом сокращений за счет некоторых дополнительных математических и логических вычислений. (Откопал еще и JS версию).
Если кому интересно - пишите, могу поделиться кодом.

Ключ к эффективному алгоритму здесь – определить, достаточно ли места по каждой из четырех сторон (сверху, снизу, слева, справа) от активатора, чтобы тултип вместился без выхода за пределы экрана.

Вот базовая идея алгоритма:

1. Определить размеры и положение элемента-активатора, используя getBoundingClientRect.
2. Определить размер окна браузера.
3. Рассчитать доступное пространство в каждом из направлений: сверху, снизу, слева, и справа от элемента.
4. Используя размеры тултипа, определить может ли он поместиться в каждом из этих направлений.
5. Если тултип не помещается в первоначальном направлении:
- Испытать альтернативные позиции на основе доступного пространства и размеров тултипа.
- Выбрать позицию, которая наилучшим образом подходит и не заходит за пределы экрана.
В реальной реализации вам нужно будет также учесть размеры самого тултипа, чтобы точно определить, поместится ли он в доступном пространстве, и возможно, предусмотреть отступы от краев экрана.

Также важно обеспечить динамическую перепроверку позиции тултипа при событиях, которые могут изменить положение или размер активатора, например, при изменении размера окна браузера (event resize) или прокрутке страницы (event scroll).

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

Выполнить:
python -m venv venv
(если ранее уже было сделано, то не обязательно)

Узнать версию python:
(ниже в коде пригодится версия Питона...)
python -V

Подправляем в коде ниже версию Питона из вывода выше и выполняем:
sudo rm /usr/lib/python3.11/EXTERNALLY-MANAGED

Уже не раз сталкивался с тем, что после обнов python, опять не работал pip.
Просто повторяем тоже самое командой выше и всё заработает.

Та же трабла проскакивала в Ubuntu 23.04...

Никак он не может отслеживать изменения в файле, пока его не сохранят. В каком редакторе вы пишите? Отключите опцию автосохранение редактора. В самом ватчере, можно использовать параметр задержки

function watcher() {
  gulp.watch('./src/style.css', { delay: 500 }, styles);
}
// в данном случае будет задержка в полсекунды после сохранения файла.

Проблема не в useRef, проблема в том как работает console.log. Если в console.log передается объект, то он выводится по ссылке, в итоге получается, что когда обновляется ref, то браузер автоматом обновляет его в консоли.
Чтобы проверить, что useRef работает как надо - достаточно вывести current значение из ref, т.е. console.log(t.current, 0)
Если же нужно вывести именно объект на момент его логирования, то можно привести объект к строке и снова собрать в объект:
console.log(JSON.parse(JSON.stringify(t, 0)))

На MDN можно почитать про это

Нашел нужное правило в линтере https://typescript-eslint.io/rules/no-unnecessary-...
По недоразумению его не было в проекте, зато теперь я знаю больше про работу ts)

IIFE можно использовать, чтобы не сорить в глобальной области видимости

Array.from(el.classList).forEach(n => el.classList.toggle(n, !!n.indexOf('modal--')));

или

el.classList.remove(...[...el.classList].filter(n => n.startsWith('modal--')));

или

for (let i = el.classList.length; i--; ) {
  if (el.classList[i].search('modal--') === 0) {
    el.classList.remove(el.classList[i]);
  }
}

или

el.className = el.className.split(' ').filter(n => !/^modal--/.test(n)).join(' ');

или

el.className = el.className.replace(/(^| )modal--\S*/g, '').trim();

Еще как можно. Как вариант SSR -> Next.js + sequelize (БД)

https://codepen.io/AnnaSummer/pen/qBoRVyz
И тут https://qna.habr.com/q/1149992

Надо действительно написать этот самый круд.
А дальше его переписывать.
Этим можно себя занять очень надолго.
Причем не надо сразу задрав штаны бежать за красивыми словами - эмвэце, оопэ.
Учиться надо постепенно. Иначе станешь не разработчиком, а попугаем.

MVC надо прочувствовать. Надо поставить себя в ситуацию, когда станет понятно - "Вот я дебил, зачем же я SQL вперемешку с HTML писал! Теперь придется выковыривать. Но уж дальше у меня логика и вывод будут разделены!".
А потом - "Вот я дебил, зачем же я прямо в контроллере всю логику шарабашил! Теперь в консольной команде то ли код дублировать, то ли опять логику из НТТР интерфейса выковыривать".
И потом - "Вот я дебил, всё сам на коленке писал, когда в фреймворке всё уже готовое!"
И так много-много итераций.

И это я не перечисляю совсем уж детсадовские инсайты, типа "вот я дебил, оказывается если SQL запросы не защищать, то и авторизацию по сути писать бесполезно - все равно кто хочешь зайдет" и "Ой, оказывается кроме меня на сайте ещё другие пользователи есть! И им ошибки показывать не надо!"

В общем, надо сделать простое приложение, по возможности положить его онлайн, и заниматься его развитием.

Неправильно парсишь, первым элементом передаешь селектор, а вторым html-код или документ, где надо найти.

Например:

$('#test', '<div class="b"><div id="test"></div></div>').length;

Но надо понимать, что jQuery не умеет искать на верхнем уровне. Например, так ты ничего не найдешь:

$('.b', '<div class="b"><div id="test"></div></div>').length;

Если нужен поиск по всему дереву, лучше использовать DOMParser для предварительного парсинга:

doc = new DOMParser().parseFromString('<div class="b"><div id="test"></div></div>', 'text/html');

$('.b', doc).length;

В твоем же случае можно поступить проще и просто обернуть ответ в еще один div:

$(document).on('click', 'a', function(){
    $.ajax({
        url: $(this).attr('href'),
        dataType: 'html',
        success: function(data) {
            console.log($(data)); //Тут выводиться ниже в скрине
            console.log($('<div>'+data+'</div>').find('#pagination')); // Должно найти
        }
    });
    return false;
});

P. S. Если ТОЧНО знаешь, что нужный элемент находится на верхнем уровне, то можно использовать фильтр:

$(document).on('click', 'a', function(){
    $.ajax({
        url: $(this).attr('href'),
        dataType: 'html',
        success: function(data) {
            console.log($(data)); //Тут выводиться ниже в скрине
            console.log($(data).filter('#pagination')); // Должно найти
        }
    });
    return false;
});

https://developer.microsoft.com/en-us/microsoft-ed...

Но остаётся вопрос — зачем?