00:00 Интро 00:53 Постановка задачи 01:12 Обзор основы 02:16 Обзор дизайна 03:28 Разметка контрола 05:18 Добавление стилей 05:48 Позиционирование 06:20 Описание группы 06:59 Радиокнопки 07:47 Инверсные иконки 08:56 Блок статуса 10:35 Индикатор статуса 11:55 Красота инверсии 12:43 Подключение JS 13:13 Обзор работы скрипта 14:43 Форсинг темы 15:39 Сетап скрипта 17:08 Сетап свитчера 18:04 Переключение 18:53 Установка схемы 20:28 Сетап схемы 21:40 И ещё демо 22:06 Вывод 22:47 Аутро
@teinett3 жыл бұрын
"Мы не рисуем сову" ❤️ Эти страдают многие туториалы, но не видео Вадима. Большое спасибо! :)
@ShamanKingTrue Жыл бұрын
Офигеть как круто и красиво реализовано, сколько находил туториалов по дарк моду, этот пока самый крутой
@RostyslavFutornyi3 жыл бұрын
Мощное видео, очень подробно и продуманно. Крут! Буду теперь юзать в своих проектах
@IIYTHNK Жыл бұрын
Спасибо за интересный и нужный материал! Очень нравится лаконичная, цельная, без 'воды' подача.
@drmonochromer3 жыл бұрын
Можно повесить один обработчик вместо трех для события `change` на корневой элемент `switcher`
@vyacheslavvasilev177610 ай бұрын
Спасибо за подробное и четкое объяснение!
@antoha008943 жыл бұрын
Как раз делал такой функционал несколько дней назад, круто, что, оказывается, делал как сам гуру
@ea4613 Жыл бұрын
Спасибо за информацию и такую подачу 🤝👍♥️
@shtirlizc10243 жыл бұрын
Класс! Отдельное спасибо за подробные объяснения мелочей
@VIMPdev3 жыл бұрын
Способ анимации переключения топ!) Взял на заметку)
@kostk19873 жыл бұрын
Спасибо за ролик. Жду не дождусь следующего контента. Привет с Израиля
@den-rad3 жыл бұрын
Спасибо, узнал много чего нового!
@LiebGoth3 жыл бұрын
Очень информативный видос, как всегда, благодарю
@artyomnomnom3 жыл бұрын
Вижу Вадим читает все комментарии, тогда напишу: спасибо за видео :)
@mrakov3 жыл бұрын
Крутая фишка с разделением стилей тем и идея с фильтрами поверх иконок. Я бы ещё убрал 3 слушателя на 1.
@marinatripetska17723 жыл бұрын
Как вовремя! Мы как раз эту тему на курсе проходим:)))
@alexelkin25023 жыл бұрын
О! крутой цвет фона! не портит цвет кожи, и красиво.
@thelocalbody3 жыл бұрын
Макеев - офигенный !!! Готов смотреть его всю свою биографию.
@demon23217773 жыл бұрын
А-а-а-а а-а-а-а-а, ура-а-а!!!! Спасибо большое!
@galinahappy6919 Жыл бұрын
спасибо
@NOX_69RUS3 жыл бұрын
Как всегда круто! И ответы на появившиеся вопросы уже даны в комментах. А как правильно подобрать сочетание цветов (контрастность, которую так любит Lighthouse) чтоб при переключении темы пользователем не лишить его зрения? И можно ли сделать само переключение плавнее? Fade-in, Fade-out или типа того?
@Михаил-п3о9ь3 жыл бұрын
Нереально круто!
@bespoyasov3 жыл бұрын
Огонь, очень круто!
@catexis13 жыл бұрын
Как всегда доступно и интересно! Спасибо за видео! Будут ли видео про веб-компоненты?
@pepelsbey3 жыл бұрын
Я рассказывал про Shadow DOM, но хочу рассказывать ещё про веб-компоненты kzbin.info/www/bejne/kJu8fK2od6p4q6s
@kacetal Жыл бұрын
Здравствуйте спасибо за отличное видео. У меня появился вопрос, а на чем вы основываете именование переменных почему иногда вы используете "_" а иногда "-" б
@pepelsbey Жыл бұрын
Это называется БЭМ: блок, элемент, модификатор. Система именования, которая помогает писать независимые блоки, см. bem.info
@Nick-hq8of2 жыл бұрын
Если еще добавляли бы реализацию на react третьим выпуском, было бы превосходно.
@pepelsbey2 жыл бұрын
Четвёртым на Vue, пятым на Angular, шестым на Lit, седьмым на Svelte. Такие видео устаревают за год, а это будет актуально гораздо дольше - я про платформу рассказываю, а вы наверняка сможете адаптировать решение под свои задачи.
@drak0an2 жыл бұрын
Очень изящная кнопочка, абсолютно правильная идея порадовать пользователя, что его запрос в приоритете, но такой скомканный js-код... часть переменных гетаются, часть собираются в конст, функции выполняют то одно то много чего вне своего названия, и вроде такая простая задача, а так спагетифицировано. И всё же всё работает и выглядит хорошо с микроанимацией.
@pepelsbey2 жыл бұрын
Мне кажется лучше было бы написать это кодом, чем накручивать эпитеты про спагетти. Мол, так было бы лучше - и ссылку.
@drak0an2 жыл бұрын
@@pepelsbey да, согласен, только это чуть больше времени чем комментарий чиркануть.
@drak0an2 жыл бұрын
@@pepelsbey На самом деле я решаю задачку для организации многостраничного приложения с темами со сборкой в вебпак, так чтобы дизайнер мог добавлять свои цветовые схемы в любом количестве (как файл с набором переменных в scss с кодами цветов), не привлекая потом фронтендера для регистрации их по всему коду. И хочется совместить преимущества всех подходов, пока думаю как это сделать. Код для управления свитчером и управления темами уже всяко будет другим в этом проекте.
@ilnurryazhapov2 жыл бұрын
нормальный код, все понятно
@drak0an2 жыл бұрын
@@pepelsbey 1. Принцип единственной ответственности функций 2. Более аккуратные названия + все действия и проверки имеют свои названия 3. более "плоский" код (одна главная функция вызывает все по очереди) + не запутанное дерево вызовов (чтение кода сверху вниз/снизу вверх, а не клубком и спиралькой) 4. высушенный код (нет копирования кода) 5. стрелочные функции, только одна функция с контекстом 6. отделены константы названий классов и другие строковые данные
@olgapolikashina64843 жыл бұрын
во время аутро чувство, что скорость воспроизведения 1.5. отличная дикция!!
@pepelsbey3 жыл бұрын
С пятого дубля 😳
@KartoshkaNP3 жыл бұрын
05:28 Реакция тестировщика на таску, которую фронт ему отдал:
@SomeTimesCoding3 жыл бұрын
Раз мы switcher позиционируем абсолютно, тогда, по идее, вместо "margin-left: -50px" можно использовать "transform: translateX(-50%)". Тогда не придётся править margin-left если у нас изменится ширина самого переключателя.
@pepelsbey3 жыл бұрын
Почти у всех задач в CSS есть несколько решений. Я стараюсь избегать сдвигов с помощью трансформаций потому, что они мылят текст. В этом случае там текста нет, но привычка сработала.
@SomeTimesCoding3 жыл бұрын
@@pepelsbey про несколько решений согласен. Вы же сами об этом говорили, еще когда я обучался в HTML Academy :) Надеюсь 4 сентября услышать и увидеть больше новых и интересных моментов, чтобы "освежить" свои знания.
@eduardgorte82413 жыл бұрын
Это видео 9.5 из 10
@Junckovski3 жыл бұрын
Супер! Вот только с доступностью интересно получается, ты сделал переключатели доступными для скринридеров, но насколько это оправдано для людей которые не смогут увидеть результат, которым этот функционал по сути не нужен или даже будет мешать, когда они будут перемещаться по сайту с клавиатуры. Ведь когда блок окажется в в фокусе, скринридеру придется зачитать все что там находится.
@pepelsbey3 жыл бұрын
Скринридеры используют не только незрячие. Мне кажется, что делать доступным всё, чем можно воспользоваться и не решать за других людей что им нужно, а что нет - более правильный путь. Хотя бы потому, что мы плохо понимаем задачи и потребности пользователей скринридеров.
@drak0an2 жыл бұрын
Переключение цвета на низкий/высокий контраст/отсутствие цвета/крупный шрифт это как раз одна из целей существования скринридера. В такой же свитчер можно поставить эти специальные возможности.
@zerdox43 жыл бұрын
Советую избегать использования z-index. Они часто конфликтуют между собой и особенно на больших проектах. В данной демке можно было перенести switcher__status перед элементами switcher__radio, а не использовать "костыльный" z-index. Мелочь, но поддерживать такой код проще на мой взгляд. Не приходится вмешиваться в естественный flow элементов
@pepelsbey3 жыл бұрын
У вас иррациональный страх какой-то. Я осознанно не использую сочетание z-index: 1 и z-index: 2, чтобы расставить блоки в нужном порядке. Вместо этого я кидаю один назад, а остальные стоят как стояли. Плюс из контекста наложения, который создан внутри блока, это z-index: -1 никуда не денется. В общем, если разобраться, то не страшно и полезно :)
@АнтонТомусяк-т7ц Жыл бұрын
Вадим, добрый день! А как избежать морганий экрана при перезагрузке страницы? У вас страница малая по объему и переключение не видно. У меня на сайте видно моргание. Можете подсказать как сохранять в куки а не локалстордж?
@pepelsbey Жыл бұрын
Я заметил моргание только в Safari и для этого заинлайнил переменные в шапку страницы. См. pepelsbey.dev/ Сохранение в куки вместо localStorage ничего не поменяет.
@АнтонТомусяк-т7ц Жыл бұрын
@@pepelsbey Зашел на ваш сайт. Хром (Вин10). Переключил тему на черный, перехожу по ссылкам или обновляю страницу, и вижу моргания. А также слайдер выбора темы, при перезагрузке, из положения авто анимировано переходит в темный режим. Конечно, если в системе выбрать черную тему, то морганий на черной теме сайта нет. А вот если при системной черной теме выбрать белую сайта, то теперь моргания черным фоном. И слайдер переключается при загрузке страницы.
@pepelsbey Жыл бұрын
Можно заинлайнить скрипт, чтобы работал до рендеринга. Но мне кажется, что это не стоит того в моём случае. Ну либо делать SPA, где нет прямой навигации.
@Woody_Johnson10 ай бұрын
@@pepelsbey на больших страницах моргание присутствует всё таки. Иногда скрипт для переключения темы срабатывает чуть позже и тогда происходит мерцание, на мгновение отображается тёмная тема, а потом только светлая (потому-что стили тёмной находятся после). Даже если заинлайнить это дело в head. Вот куки эту проблему решают. Просто помимо локалстореджа ещё записываем куки, а на серваке в зависимости от кук возвращаем ту или иную версию цветовой схемы.
@maksmen89093 жыл бұрын
Доброго времени суток, в vs code при развертывании span.text$*5 код получается в строчку а не в столбик что очень не удобно) Помогите пожалуйста советом за ранее благодарю
@arturkhurshudyan44703 жыл бұрын
Извините, я написал тот же текст, что и вы, но код у меня не работает, где я могу взять код, который вы написали?
@pepelsbey3 жыл бұрын
В описании к видео есть ссылка на демо, где можно посмотреть код
@k-ivan3 жыл бұрын
Вадим привет! Спасибо за видео. Подскажи, что за тема в редакторе у тебя?
Вадим, а зачем тут legend вообще? Раз мы делаем его невидимым, то может просто для fieldset задать aria-label="Цветовая схема"? Или "Цветовая тема", так кажется понятней. Ща гугл решит я накручиваю комменты к ролику. Официально заявляю что мне за комменты никто не платил (но кошелек могу оставить) :)))
@pepelsbey3 жыл бұрын
У legen и fieldset особые отношения, как я сказал: поля внутри fieldset получают дополнительное описание как раз из legend. Это не обязательно, можно расширить описание каждой из опции «Светлая схема» и так далее.
@Mitorun3 жыл бұрын
@@pepelsbey смущают две вещи: нелогично писать контентный текст и потом скрывать его (когда для этого существуют специальные теги), и еще боюсь что поисковикам может не понравиться невидимый текст.
@nikolaykolomyytsev50783 жыл бұрын
Мне кажется, использование трёхпозиционного переключателя в данном случае избыточно. Вполне достаточно и двухпозиционного: "авто" и "другая тема". Это такая же история, как и с переключателями языков, избыточно показывать текущий язык достаточно отобразить список языков на которые можно переключится.
@pepelsbey3 жыл бұрын
Вариант с двумя состояниями не позволяет зафорсить текущую тему, только противоположную. То есть теряется часть возможностей. Плюс менять контролы - плохая идея, лучше он будет чуть сложнее, но зато будет точно передавать происходящее.
@tirozit7202 жыл бұрын
А можно обойтись без дополнительных подключений стилей, то бишь хранить все в одном index.css?
@pepelsbey2 жыл бұрын
Можно, но тогда не получится такого простого переключения стилей.
@drak0an2 жыл бұрын
делаешь 2 набора var ов в двух классах. Потом при помощи js переименовываешь нужный класс в :root, а ненужный в другое имя. Минус в том, что если будет очень много цветовых схем, то основной css будет распухать от них
@АндрейЯсновский-г5э3 жыл бұрын
Спасибо за крутое видео!) Кажется я один не могу понять, откуда появляется обводка с фоном у fieldset (( Был бы очень рад, если бы кто-нибудь рассказал)
@pepelsbey3 жыл бұрын
Это блок статуса на 08:56
@АндрейЯсновский-г5э3 жыл бұрын
@@pepelsbey Ааа, буду внимательнее, спасибо большое)
@КостянЕрмаков-е9ю3 жыл бұрын
Ну, и теперь осталось добавить цветовые темы ко всему этому.😁
@pepelsbey3 жыл бұрын
Это уже сами )
@temikflookin Жыл бұрын
почему-то я всё равно получаю вспышку когда системная светлая, а я включаю тёмную на сайте, на перезапуске вспышка светлой темы
@pepelsbey Жыл бұрын
В этом способе выбор темы, которая не соответствует системной, идёт с таким спецэффектом. Браузер сначала начинает рисовать то, что он прочитал из HTML и только потом добирается до скриптов, локального хранилища и понимает, что у вас другие настройки. Это происходит достаточно быстро, но всё равно заметно. Настройки нужно либо сохранять на сервере, либо в куках и читать их тоже на сервере. В сравнительно простых решениях только так.
@temikflookin Жыл бұрын
@@pepelsbey Благодарю, Вадим, это были очень полезные знания для меня. Успехов тебе в дальнейшем развитии! С Рождеством Христовым!
@temikflookin Жыл бұрын
@@pepelsbey интересное наблюдение из-за этого кода в шапке у брата не открывается сайт вообще на айфоне 6 и в сафари и в фоксе if (matchMedia('(prefers-color-scheme: dark)').media === 'not all') { document.documentElement.style.display = 'none'; document.head.insertAdjacentHTML( 'beforeend', '' ); }
@Mitorun3 жыл бұрын
Если сделать такой переключатель на разделе где есть фон, то подложка-status исчезает из-за z-index: -1. Вместо этого поставил z-index: 1 на инпуты.
@pepelsbey3 жыл бұрын
Если переключатель имеет свой контекст позиционирования (absolute, relative), то z-index должен оставаться в его рамках. Наверное у вас переключатель без контекста.
@Ratelchief3 жыл бұрын
не особо понял в какой момент css понимает какую тему использовать основываясь на системных показаниях до того, как подключили js
@pepelsbey3 жыл бұрын
Это вам в первое видео, я там подробно объясняю kzbin.info/www/bejne/h6jYqpilbM6ohLs
@Ratelchief3 жыл бұрын
Спасибо, посмотрю
@ИловМакс3 жыл бұрын
А localStorage на телефонах работает?
@pepelsbey3 жыл бұрын
Конечно, это давний браузерный API, который поддерживается во всех браузерах и на всех платформах
@shakur.02382 жыл бұрын
А зачем юзерам, пользующимся скринридерамит вообще тему выбирать?
@pepelsbey2 жыл бұрын
Скринридерами пользуются не только незрячие пользователи, но и те, у кого сложности с моторикой, например.
@shakur.02382 жыл бұрын
@@pepelsbey действительно, даже не задумывался
@nikolaykolomyytsev50783 жыл бұрын
И ещё если мы говорим о красоте и логичности использования операторов JS, то в случае тройного выбора красивее использовать SWITCH, а не комбинацию из IF и двух тернарных операторов. Ну это так, брюзжание... Спасибо за видео.
@pepelsbey3 жыл бұрын
Я трижды рефакторил эту функцию (был и ваш вариант) и остановился на этой версии, как самой понятной. На мой взгляд, switch..case бывает избыточным и мешает читаемости.
@iGotton3 жыл бұрын
+
@yyaahooyy Жыл бұрын
Я немного разочаровался в этих авто темах, так как какой ни будь самсунг интернет (мобильный) браузер, включит свою уродливую тему по верх твоей, покорёбит все цвета. Надеюсь это в будущем исправят. По этому всегда делаю светлую и тёмную в ручную, а авто на основе темы убираю. Такое ощущение, что браузеры делают люди, которые никогда не делали сайты) Тоже самое и с шрифтами, почему то некоторые мобильные браузеры считают, что обязаны по умолчанию увеличить шрифт сайта, на основе параметров темы телефона и что не делай, вёрстка из за увеличенных букв будет выглядеть не так как задумал дизайнер. Короче придумали очередную дурь.
@yyaahooyy Жыл бұрын
Хотел уточнить, переключение тем делаю на основе css js без этих фокусов со специфичными запросами к темам.
@pepelsbey Жыл бұрын
Мне кажется, что вам стоит отпустить контроль над результатом. Браузеры всегда делали то, что в интересах пользователя: размер шрифта или даже подмена, блокировка картинок, рекламы или даже скриптов, даже отключение некоторых API. Хороший код готов к такому, помните об этом и думайте на шаг вперёд :)
@md2dfg13 жыл бұрын
А теперь откройте демку в Chrome 64)
@md2dfg13 жыл бұрын
Вроде display: table на fieldset и display: table-cell на .switcher__radio исправляют отображение
@pepelsbey3 жыл бұрын
Январь 2018, когда вышел Chrome 64, был давно и доля 0,02% вряд ли интересна даже для слабой поддержки. Тем не менее, при желании, вы можете довести кроссбраузерность решения до нужной. Но стоит ли оно того?