Появляется белая полоса справа при адаптиве?

Azikkks, для того чтобы решить эту проблему, попробуйте для начала разобраться с версткой, а также привести стили в порядок.



Выглядит круто.

Как сделать плавающую кнопку без срипта?

Ankhena, Сергей delphinpro, проблема лежит на поверхности. В некоторых статьях, разработчики рекомендуют использовать для создания модальных окон, табов, аккордеонов, etc - только CSS/HTML, без единой строчки JS. Читая подобный материал, многие люди воспринимают это как нечто оригинальное и начинают думать что JS - это страшная штука. Типа скрипты безумно нагружают сайт или если использовать много скриптов, будут какие-то мифические конфликты между ними и сайт будет сломан... эпичные фантазии.

Я абсолютно не удивлюсь если однажды будут появляться глупые вопросы, в духе:

"Как работать с localStorage без JS, используя только CSS",
"Как отправить fetch с помощью CSS".

Ну и так далее, насколько только хватит фантазии.

Как анимировать строку с логотипами (в случае если их количество заранее неизвестно)?

Сейчас используется готовая библиотека swiper js, но она большая и вечно какие-то, то ошибки выдает в консоли, то на нее ругаются все анализаторы скорости.

Можно сделать свою сборку Swiper и убрать лишние модули. Таким образом, библиотека будет весить меньше.

Использовать id как способ логически разделить контент в коде, это ок?

aaltqna, быть может количество символов и будет на порядок больше, а может и меньше. Смотря как всё это дело готовить.

Не обязательно брать BEM, можно взять даже какой-нибудь ECSS или что-то в этом роде. Вариантов огромное множество, нужно просто глубже копнуть.

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

Реализация унифицикации и инкапсуляции в CSS - дело достаточно сложное, потому что единого верного пути нет. Кто-то использует BEM, другие используют модули, веб-компоненты, postcss-modules, и так далее. Так что... придется пробовать на практике и выбирать что-то наиболее выгодное и удобное, чтобы разработка в дальнейшем, не превратилась в боль и бесконечные рефакторинги кода.

Есть ли какой то сервис имитации спам атаки на формы?

Хочу протестировать свою защиту для антиспама. Как это можно имитировать

Наверное один из вариантов - самостоятельно. Это типа из категории:

Чтобы понять как бороться со спамерами, нужно самому стать на время спамером для своего собственного приложения или сайта, чтобы проверить на практике различные методы, с помощью которых можно обойти анти спам защиту.

Однако возможно это достаточно эпично. Способ не идеальный, потому что есть разные уровни всяких спам атак и прочего, и придётся очень много читать, изучать, пробовать, возможно всё это будет полезно, а может и нет. Точный ответ можно будет получить в процессе.

Ну, а насчёт сервиса, то наверняка такой сервис не существует, либо может и есть какие-то варианты, но это не 100 - процентная гарантия того, что тот или иной инструмент, может помочь в создании непробиваемого купола от различных видов атак.

Есть ли плагин, для изменения DOM при адаптиве?

Im p3l,

Часто приходится, при адаптиве менять DOM, иначе ну вот никак, ибо например кнопка, была в одном месте, а в мобиле по дизу она вообще появляется в другом месте.

Ну, вообще-то ТС пишет про кейсы, в которых не всегда media query из CSS способны решить поставленную задачу.

Да, в идеале, конечно удобно пользоваться медиа запросами, но это работает в "идеальных" случаях, ровно также как и например создание тех или иных компонентов без JS, хотя его наличие всё же требуется, не всегда, но бывают и такие случаи. Взять даже в пример модальные окна. Разумеется можно сделать с помощью CSS и HTML, но функционал будет настолько бедным, что такое решение подойдёт только в редких случаях, возможно.

hesrun, есть такой вот вариант: dynamic_adapt.

Как организовать код на js?

samorez999, обновил ответ.

Как сделать такую анимацию?

Кирилл, :hover отличный инструмент и очень часто выручает, но не в этом случае.



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

Эффект конечно неприятный. Кнопка дрожит как листва на осеннем ветру, но это поправимо, средствами CSS(полностью или частично), правда всё равно :hover - это не то что всегда поможет в подобных ситуациях.

Дальше уже через JS подставлять свои классы для того, чтобы кнопка не всегда убегала.

А вот это уже хорошая идея.

Почему при добавлении новых элементов в массив, цикл их не видит?

Paul Golovin, можно сделать по другому. Обновил ответ.

Почему при наведении на один элемент не делает видимым другой?

Rosteur,

Почему не работает for внутри append?

Не кидайте в меня камни я только учусь, а где вы увидели шутки? Изучайте синтаксис языка, чтобы не было таких глупых вопросов.

Как сделать, чтобы элемент с position absolute не перекрывал текст?

Agent Ksined, воспроизведите пример верстки со стилями, например в песочнице - codepen и добавьте ссылку в вопрос, потому что гадать что и как у вас там перекрывает, непонятно. Ну, а так в целом стоит наверное прочесть как работает position: absolute.

Как кликнуть по элементу, у которого один Class, но уникальный id?

Firpso, если там в качестве плеера используется тег <video>, тогда вы можете повесить на него обработчик и дождаться окончания видео таким образом:

document.querySelector("#player").addEventListener("ended", () => {
   alert("Закончилось видео!")
});

HTMLMediaElement.endedEvent

Альтернативным вариантом будет отслеживание изменений атрибутов, например дата-атрибутов или селекторов по классу.

У e.target из KeyboardEvent нет метода classList.contains()?

accountnujen,

<code lang="diff">
- старое значение
+ новое значение
</code>

Как кликнуть по элементу, у которого один Class, но уникальный id?

Firpso, элемента с таким селектором нет на странице.

Как добавить класс в зависимости от ширины экрана?

Денис, да, замените .slider селектором своего слайдера.

Можно ли ставить after прямо на input а не на form?

Вадим, ага... псевдо есть даже когда картинка загрузилась, но он не отображается. Вообще штука может быть полезной, например через псевдоэлемент таким образом можно было бы добавить какую-нибудь загрушку, на случай если картинка не загрузилась, но такое редко требуется.

Лев Александров, да, конечно, на input тегах с типом: radio, file, checkbox, range и возможно каких-то других, псевдоэлементы будут отображаться. Я неправильно выразился вчера, написав про input теги в целом.

Как расположить карточки в ряд?

еще вопрос. как прибить логотип и фотку телеграмма к правому и левому краю, чтобы их положение не зависело от размера экрана

Правило 3.7 сайта.

Как растянуть sidebar до конца страницы?

Vova135798,

У меня есть хедер, поэтому появляется скрол

Хм... как всё сложно...

.sidebar { min-height: calc(100vh - 40px) }

Указываем минимальную высоту сайдбара в 100vh, при этом отнимаем от этого значения высоту хейдера, которая равна 40 пикселям.

Как такое сверстать?

Perflex_er, не понимаю чем не устраивают библиотеки, но да, можно и без библиотек реализовать. Можно даже без JS реализовать, силами одного только CSS, но придётся сделать немного больше телодвижений.

Вот например есть несколько вариантов.

Ну или что-то такое.