Цветные вкладки 🌈 на theme-color для Safari, Vivaldi и Chrome. Бонусом ES-импорты, сервер на Node.js

Подписаться 40 тыс.

Просмотров 10 тыс.

50% 1

00:00 Интро
00:29 Темы в Safari
01:21 Темы в Vivaldi
02:23 Темы в Chrome
03:16 Фон как тема
04:05 Мета с темой
04:43 Темы в режимах
05:38 Не все цвета
06:31 Кнопка переключения
07:12 Скрипт переключения
09:07 Неработающие цвета
10:16 Задача для сервера
11:00 Описание сервера
12:47 Запуск сервера
13:47 Выводы
15:19 Аутро
Нравится? Становитесь патронами / pepelsbey
Демо pepelsbey.github.io/playgroun...
Chrome в 2014 developers.google.com/web/upd...
Vivaldi в 2018 vivaldi.com/blog/page-color-i...
Safari в 2021 Design for Safari 15 developer.apple.com/videos/pl...
Веб-манифест и theme_color w3c.github.io/manifest/#theme...
Поиски цветов-исключений / 1407960783577886721
Алгоритм контрастного цвета в Chrome / 1404754729134141440
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX

Опубликовано:

12 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@pepelsbey 3 года назад

@lenaryan 2 года назад

- Не очень код - Но у меня всё работает! Ору чаечкой :D

@sergeykozhenkov371 2 года назад

Больше видео про PWA и правильное создание тёмной темы требуют наши сердца :)

@PycmXpycm 2 года назад

Забыли указать, что в режиме инкогнито theme-color не работает

@pepelsbey 2 года назад

Как-то не пришло в голову проверить, спасибо!

@DimitarRad 2 года назад

Салют, Вадим. Спасибо за твою деятельность и за этот ролик в частности. Это видео помогло решить задачку (связанную с es модулями) в текущем проекте.

@pepelsbey 2 года назад

Не ожидал, что меня унесёт в эту сторону, но значит не зря )

@progerlife6690 4 месяца назад

Огромное спасибо. Недавно переписывал сайт который был сверстан на таблицах еще в 2008 году взрыв мозга..

@igorbeliakovski7649 2 года назад

Спасибо. Забавно и любопытно. Будем ждать для десктопов

@Pipal96 2 года назад

Классная фича. Как только на презентации об этом заговорили сразу подумал «надо брать!». Написал лиду с предложением добавить на проект. Спасибо за видео!

@EirikUa 2 года назад

Спасибо, полезно и интересно.

@mazya.youtube 2 года назад

Гайд "как призвать холивар фразой 'Фух, так гораздо лучше'" :D

@user-ko7vb5lf8j 2 года назад

Можно было еще попутно красить кнопку, чтобы понимать в итоге какой цвет вернул random если шапка не покрасилась. :)

@egoist2956 2 года назад

Лайк

@aelmenov 2 года назад

Из темизации и pwa - в windows можно сохранять кнопку с ссылкой на сайт в меню пуск, и контролировать ее цвет/иконку. Пожалуй, это все, что нам доступно.

@Black1991Star 2 года назад

Спасибо. Интересно, а при рендомной раскраски темы, оно и рендомно меняет цвета шрифтов? (Я видел в видео и белые шрифт текста и черный) Так по сути оно сравнивает theme-color и два цвета #fff #000 и подбирает то что допустимо по уровням контраста или там другая зависимость?

@pepelsbey 2 года назад

Это зависит от браузеров, но кажется в случае Safari цвет текста и иконок сохранятся.

@samandarturdiyev1391 2 года назад

Very good

@sn00we 2 года назад

Вадим, спасибо за ваши видео 🤝 Подскажите, пожалуйста, можно ли как-то «попросить» браузер не красить панель браузера при использовании моего сайта, кроме варианта задать theme-color=“red”?

@pepelsbey 2 года назад

Боюсь, что можно только зафорсить свои цвета. Какое-то невалидное значение сбросит браузер в режим «догадаюсь какой фоновый цвет».

@sn00we 2 года назад

@@pepelsbey спасибо большое! Удачи 🍀

@papan41k 2 года назад

И футболка крутая, и тема интересная! А я все задавался вопросом, как это они так делают, а тут вон что оказалось) Спасибо Вадим, что все по полочкам разложили ;)

@orkney89 2 года назад

tomato - one love

@SamaraDjVitek 2 года назад

Спасибо за классное видео! Добавлю себе в список обязательного при разработке :)

@user-ei7qp6nu1f 2 года назад

Крутая фича, спасибо, как всегда узнаю от тебя новинки!

@antontraceur 2 года назад

Подскажите пожалуйста какой на ваш взгляд лучший генератор статических сайтов.

@pepelsbey 2 года назад

Eleventy ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DtTadxKrFMY.html

@kqlek 2 года назад

Кажется уже года два пишу код цвета в этот метатег при очередной верстке, не забывая про него :)

@pepelsbey 2 года назад

Раньше писали просто так, а теперь будем со смыслом )

@romanm2968 2 года назад

Очень круто, но не работает в Release 127 (Safari 15.0, WebKit 16612.1.18.11.3). Или нужно куда-то еще смотреть?

@pepelsbey 2 года назад

Да, к сожалению, они откатили theme-color в TP 127, надеюсь вернут в 128!

@dimaburichin7726 2 года назад

Спасибо за видео! Фича классная но малая поддержка напрягает и да как и сказал автор играть с палитрой цветов на сайте надо аккуратно! Хотя сами браузеры на андроид именно самсунг сам вкорячивает темную тему на сайт и приходиться делать кастыли иначе будет вырви глаз. Vivaldi знаком давно прикольный браузер(много интересных фич там обкатывают) хотя больше его вижу на Linux.

@vkgog 2 года назад

Хорошая штука, простая реализация, но до десктопов доберется наверно лет через 10 😄

@pepelsbey 2 года назад

Да ну, уже на десктопах же. В Safari будет осенью, в Vivaldi уже есть.

@vkgog 2 года назад

@@pepelsbey это да, но они не массовые, в браузерах годами живут разные фитчи, не кочуя в другие )

@thelocalbody 2 года назад

А я уверен - что Вадим Макеев каждый день пишет сервера на NODE.js !!!

@pepelsbey 2 года назад

Разве что полный тёзка. Привет ему!

@skeev_ 2 года назад

Я могу ошибаться, но, из десктопов в theme-color умеет Яндекс.Браузер (или умел?). Еще в году 2017 я где-то увидел код и всюду начал таскать в верстке у себя небольшие сниппеты и манифесты с кучей фавиконок и т.д., где был как раз проскакивал мета theme-color. На мобилках это прям суперски выглядит и я все ждал, когда десктопы дойдут. Кажется, что мелочь, но на телефонах очень стильно выглядит

@pepelsbey 2 года назад

Умел, но в другом нестандартном синтаксисе. К счастью, это выпилили.

@alenakazarina5175 2 года назад

В итоговом примере получилось, что все заливает одним цветом, хотя в коде функция random вызывается в 2х местах =) Но это издержки random'айзера. А так да, в основном в веб-манифесте видела такие вещи.

@pepelsbey 2 года назад

Функция вызывается аж в четырёх местах, в случае с Node.js :) Ну да, я не стал запариваться и выбирать уникальные значения, но для демки этого достаточно.

@SmotritelTube 2 года назад

Про copilot было бы интересно, там вроде как поддержка react, плюс умеет сам рисовать кнопочки, формочки, вообщем инструмент на миллиард долларов , убийца программистов😅👌

@pepelsbey 2 года назад

Не хочется тратить время на все эти игрушки )

@PostoiParovoz 2 года назад

Как хорошо что мой старый Firefox не поддерживает эти нескучные обои и всегда в тёмной теме!

@PostoiParovoz 2 года назад

Перекрасить цвет вкладки куда не шло, но не интерфейс браузера. Пусть сначала Хром даст возможность красить селекты и скроллы, как это было во времена IE6. А помните почему в Хроме запретили красить их?

@pepelsbey 2 года назад

Да нет, не запретили ishadeed.com/article/custom-scrollbars-css/

@PostoiParovoz 2 года назад

@@pepelsbey действительно не запретили, просто выпилили полностью и веб-мастера извращаются на JS с этими скроллами, создавая кривые страницы обвязанные костылями (уже более 10 лет прошло?), а новый велосипед когда-нибудь: "will make things easier for us when it’s fully supported"

@whatthepeople 2 года назад

@@PostoiParovoz нет никаких костылей, по ссылке-то читали? Все делается через псевдоэлементы на CSS. Почему костыль-то?

@slprime-old 2 года назад

@@PostoiParovoz это не chrome выпилил в firefox

@Andreykch 2 года назад

эххх, раньше яндекс браузер умел красить вкладочки, а теперь разучился(((

@pepelsbey 2 года назад

Он раньше умел красить вкладочки дичайшим, нестандартным способом. Так что к лучшему, что это выпилили.

@Andreykch 2 года назад

@@pepelsbey Хм, не знал такого. На тот момент не особо занимался фронтом, а как пользователю мне было красиво) Ну надеюсь раскрашивание через метатег сделают.

@devschacht 2 года назад

Не нужно руками package.json создавать, лучше сгенерировать через npm init

@pepelsbey 2 года назад

Это крафт!

@Iskandarko 2 года назад

А ТЫ покрасил свою шапку?! 🤠👈

@pepelsbey 2 года назад

Лето на дворе, какие шапки!

@samandarturdiyev1391 2 года назад

Be great if you'll create English channel

@pepelsbey 2 года назад

I’m not that confident speaking English for now. Maybe someday :)

@samandarturdiyev1391 2 года назад

@@pepelsbey Do you need some contributor for this?

@pepelsbey 2 года назад

No I’m good, thank you

@samandarturdiyev1391 2 года назад

@@pepelsbey Okay

@kiliarus 2 года назад

Вы видели?! Главный фронтэндщик рунета превратился в фулл-стека!

@pepelsbey 2 года назад

Максимум в 1/16-стека

@accidentalibi 2 года назад

Вадим, возможно ты как и я чаще общаешься по-английски чем по-русски. Но это не повод лениться подбирать русские слова вместо англицизмов. Зачем "Интро" и "Аутро" если есть подходящие русские слова "Вступление" и "Концовка"? Если эти слова слишком простые, скучные и немодные, есть "Пролог" и "Эпилог". Лениться - плохо 😉

@pepelsbey 2 года назад

Ну смотрите: мы оба написали слова «интро» и «аутро» во фразах на русском языке. Мы оба ни на секунду не усомнились, как их записать, прочитать, просклонять. Я выразил тот смысл, который хотел. Вы прекрасно поняли, о чём идёт речь. Знаете, что это значит? Что слово давно вошло в язык и является его частью - как и многие другие, которые вы почему-то не замечаете. Так что я говорю по-русски, это вы почему-то ограничиваете себя. Плохо - это цепляться к речи других людей. Не надо так.

@accidentalibi 2 года назад

@@pepelsbey Хмм. Я неплохо знаю английский, но и мне пришлось включить мозг чтобы понять что "Аутро" это "Outro". Догадался я скорее из-за контекста. Предполагаю, что твоя целевая аудитория - молодые разработчики, у многих из которых с английским может быть хуже или даже вообще никак. А значит это уже вопрос доступности, которую ты евангелируешь. Можно, конечно, сказать "пускай молодые разработчики учат английский", и наверное это даже правильно. Но это основывается на предположении, что всем разработчиками нужно хорошо знать английский, но это предположение истинно не в 100%. А это уже деление аудитории на нужную и ненужную. Не с этим ли ты пытаешься бороться? Если перенести эту логику например на слабовидящих, то можно же предложить им сделать операцию. Я не брюзжу, мне правда интересно твоё целеполагание.

@pepelsbey 2 года назад

Моё целеполагание простое: я рассказываю о сложных вещах простым современным языком. Аргумент «англицизм» во фронтенде мне кажется очень странным. Тут каждый день сквошат пулреквесты и чекаутят из апстрима фиксы для форка. И без этого никуда, к сожалению. Так что да, есть какой-то базовый уровень погружения в профессию, ниже которого будет сложно понять мои видео. В меньшей степени, такое справедливо и для языка.

@accidentalibi 2 года назад

@@pepelsbey Аргументы хорошие. Я согласен в отношении терминов. Но лично на мой вкус в общеупотребительной лексике это малость перебор. Разве что для кого-то Интро и Аутро это термины. Но ведь в описании видео на Ютюбе это не термины, а обозначение частей видео. Разве что это авторское название глав... Ладно, пойду отбранчуюсь от стейджинга и черепикну коммиты с фиксами.

@gooseob 2 года назад

@@accidentalibi, довольно часто и давно уже вижу слова "интро" и "аутро". Когда впервые увидел "аутро", то подумал, что это как интро, но наоборот, раз стоит в конце. Английский, кст, я никогда не учил, ни в школе, ни вообще