Отличный плагин! А как быть если надо переместить больше 1го элемента, как пример телефон + соцсети, создавать ещё один конструктор для второго элемента?
Передать ещё один объект с параметрами в конструктор. В общем доступен перенос множества элементов. Подробнее можете прочитать в разделе «Использование» в репозитории библиотеки. --- Я изначально думал сделать так, чтобы для каждого элемента требовалось вызывать конструктор, но решил, что это сомнительная идея.
Используется - MutationObserve это хорошо, не нужно обновлять страницу для отображения, я обычно использую innerWidth и appendChild, приходится обновлять для клиента не всегда понятно, но в плагине используется - var, я не силен в синтаксисе es6, но вроде бы в современных стандартах это дурной тон, может возможно переписать это по другому, например использовать вызов стрелочной функции если проблема заключается в зоне видимости?
Тоже писал такой плагин) создал класс, при инициализации которого задаются какие-то стартовые параметры, типа при каком разрешении и какая нода куда переносится. Внутри класса по сути просто использовал стандартные matchMedia от js. Но насколько я понял, это не совсем хорошая практика вообще через js переносить элементы)
@@svet0v Про это уже давно известно. Именно поэтому не было нормальных реализаций. Если в кратце, то событие change при активации проходится по всем брейкпоинтам. Чем брейкпоинтов больше, тем больше нужно произвести каких-либо действий. Я изучаю тему брейкпоинтов уже не первый год, так как она мне интересна, поэтому решил, что нужно всё это дело оптимизировать. Во всяком случае нет ничего совершенного. Возможно через какое-то время я ещё как-то улучшу механизм.
@@NivaiZRUS Привет. Ссылка на репозиторий находится в описании к видео. --- А теперь о том почему я решил переписать: 1) Не было возможности переносить один и тот же элемент на разных брейкпоинтах, что достаточно странно. 2) Его решение использует событие change, выполняющее при каждом переключении на какой-либо брейкпоинт последовательный перенос. У подобных операций высокие затраты в плане производительности. Это пожалуй один из ключевых факторов. 3) Так как библиотека завязана на matchMedia, то аргументом выступает медиа-запрос, в котором участвует абсолютная единица - пиксели. Не сказать, что это прям супер плохо, но, если пользователь решит изменить параметры шрифта в настройках браузера, брейкпоинт сработает не там, где нужно. Про эту проблему ему написали, но правки так и не были внесены. Скорее всего он прекратил поддерживать библиотеку, как это обычно бывает со многими проектами с открытым исходным кодом. --- Это, конечно, не весь список, но думаю даже этого хватит, чтобы понять, что к чему :)
Огромное тебе спасибо! Рад что нашел тебя на ютубе! Каждый твой урок - бриллиант! Твой гитхаб хранилище алмазов! Спасибо!
Пожалуйста)
Обычно просто делаю display: none в одном месте и display: dblock/flex/grid в другом и не парюсь.Все равно в 99% случаев требуются разные стили.
Дубляж кода - не самая лучшая идея + это плохо влияет на СЕО и многие заказчики как раз против этого)
@@advance5189 И ладно, если какую-то кнопку задублировать, а у меня был кейс, когда требовалось чуть ли не часть раздела перенести 😃
прикольный плагин, нужно будет попробовать в работе
Отличный плагин! А как быть если надо переместить больше 1го элемента, как пример телефон + соцсети, создавать ещё один конструктор для второго элемента?
Передать ещё один объект с параметрами в конструктор. В общем доступен перенос множества элементов. Подробнее можете прочитать в разделе «Использование» в репозитории библиотеки.
---
Я изначально думал сделать так, чтобы для каждого элемента требовалось вызывать конструктор, но решил, что это сомнительная идея.
Просто песня!
Используется - MutationObserve это хорошо, не нужно обновлять страницу для отображения, я обычно использую innerWidth и appendChild, приходится обновлять для клиента не всегда понятно, но в плагине используется - var, я не силен в синтаксисе es6, но вроде бы в современных стандартах это дурной тон, может возможно переписать это по другому, например использовать вызов стрелочной функции если проблема заключается в зоне видимости?
Пользователь все равно заходит с устройства и все, не двигает размер)
А var да, моё упущение
Тоже писал такой плагин) создал класс, при инициализации которого задаются какие-то стартовые параметры, типа при каком разрешении и какая нода куда переносится. Внутри класса по сути просто использовал стандартные matchMedia от js. Но насколько я понял, это не совсем хорошая практика вообще через js переносить элементы)
Дело в событии change, которое «бьёт» по оптимизации. Я решил эту проблему. Если интересно, можете почитать в конце readme :)
@@sineylo а каким образом оно бьет по оптимизации? где-то есть этому пруфы?
@@svet0v Про это уже давно известно. Именно поэтому не было нормальных реализаций. Если в кратце, то событие change при активации проходится по всем брейкпоинтам. Чем брейкпоинтов больше, тем больше нужно произвести каких-либо действий. Я изучаю тему брейкпоинтов уже не первый год, так как она мне интересна, поэтому решил, что нужно всё это дело оптимизировать. Во всяком случае нет ничего совершенного. Возможно через какое-то время я ещё как-то улучшу механизм.
я в восторге от ваших уроков..хочу пересматривать все и бесконечно🙏🏻спасибо вам!
Эх, winter cms бы 😅
В планах на конец февраля)
Прикольно ) Спасибо)
У Фрилансера по жизни (Жека Андриканич) что-то подобное есть. Не уверен что именно этот плагин но функционал такой же
я в курсе :) но тут чуть другая реализация
Я думаю что проще продублировать код , и в нужный момент в одном месте скрывать элемент, чем подключать лишнюю библиотеку 🙏🏻
Спорное решение, с помощью JS перекидывать блоки, хотя... вряд ли часто можно встретить сайт у которого будет отключен JS.
Я извиняюсь, но, сам то понял что написал?
Да этих людей с отключенным js единицы, не стал бы на них опираться.
А так да, копию можно сделать, но это решение тоже неплохое
Как называется цветовая тема в редакторе кода, которой пользуетесь?
One Monokai
@@maxgraph спасибо)
Что-то подобное Жека Адриканич сделал, но там перемещение в HTML прописывается, удобно кстати. Спасибо за ссылку!!
Меня его идея вдохновила на создание модернизированной версии 🙂
с этим плагином тоже так можно сделать. Так и правильнее будет. Через дата атрибуты удобнее сразу раскидывать элементы, чем в js
@@sineylo красава
@@sineylo Привет. Можешь ссылку на гит предоставить? И что сподвинуло переписать?
@@NivaiZRUS
Привет. Ссылка на репозиторий находится в описании к видео.
---
А теперь о том почему я решил переписать:
1) Не было возможности переносить один и тот же элемент на разных брейкпоинтах, что достаточно странно.
2) Его решение использует событие change, выполняющее при каждом переключении на какой-либо брейкпоинт последовательный перенос. У подобных операций высокие затраты в плане производительности. Это пожалуй один из ключевых факторов.
3) Так как библиотека завязана на matchMedia, то аргументом выступает медиа-запрос, в котором участвует абсолютная единица - пиксели. Не сказать, что это прям супер плохо, но, если пользователь решит изменить параметры шрифта в настройках браузера, брейкпоинт сработает не там, где нужно. Про эту проблему ему написали, но правки так и не были внесены. Скорее всего он прекратил поддерживать библиотеку, как это обычно бывает со многими проектами с открытым исходным кодом.
---
Это, конечно, не весь список, но думаю даже этого хватит, чтобы понять, что к чему :)