#библиотека дня

Хочется подобрать палитру для дизайна или логотипа? А может, создать тему на основе загруженной пользователем фотографии?

Для этого нужно выделить из изображения доминантные цвета.

А с этим поможет проект Color Thief: https://lokeshdhakar.com/projects/color-thief/

Работает в браузерах и в Node.js, лицензия допускает коммерческое применение.

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

#js #color #palette

#codepen дня

Восхищаться красивыми примерами можно бесконечно, но полезные – гораздо… практичнее.

Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg

Что же сделает отличный разработчик?

А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN

Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.

👉 @htmlshit
#svg #canvas #gsap

#библиотека дня

Раскладка Masonry (буквально — каменная кладка), когда элементы уложены максимально плотно, до сих пор не потеряла своей популярности. Её отличие от классических CSS-колонок – в порядке следования элементов. Если колонки это

1 4 7
2 5 8
3 6

то в Masonry- или Pinterest-раскладке порядок стремится к классической сетке:

1 2 3
4 5 6
7 8

Но в сетке все ячейки одного размера, а в кладке – нет (смотрите иллюстрацию). Была даже попытка внедрить это в CSS Grids, в одной из версий Firefox.

Долгое время де-факто стандартом библиотеки для Masonry была, собственно, Masonry.js. Но она достаточно тяжёлая и её методы немного устарели. Сейчас же есть много альтернатив.

Одна из  новых и сравнительно легковесных — это FlexMasonry. Весит всего 6 килобайт, подключается очень просто и с задачей справляется отлично. Ну и использует флексы, как нетрудно догадаться из названия 😉

👉 @htmlshit
#css #js #flex #masonry

#codepen дня

Знакомая и популярная гифка, не правда ли?

Пришло время развеять миф! Мне кажется, вы достаточно готовы к двум практически одинаковым примерам на разных техниках.

Раз, на свежих Container Queries, если ваш браузер их поддерживает: https://codepen.io/jh3y/pen/LYxKjKX

Вот только есть нюанс! Как только их завезли в Chrome Canary, появился и полифилл. Именно этот полифилл и используется в примере, так что работает практически везде.

Два, на CSS Custom Properties: https://codepen.io/jh3y/pen/KKajeyy

В общем, на современном CSS сложнее неправильно сложить жалюзи, чем правильно. С чем я всех нас и поздравляю.

👉 @htmlshit
#css #containerqueries #customproperties #polyfill

#фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

👉 @htmlshit
#codepen #npm #npx #utility

Вебинар «Конечные автоматы в реальной жизни».

Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.

Что будет на вебинаре:

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

Для кого?

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

8 мая в 15:00 (Мск)

#реклама

#статья дня

Ахмад Шадид разбирает, как прогрессировала кроссбраузерная веб-разработка за 10 лет: https://ishadeed.com/article/cross-browser-development/

Статья очень хороша как развлекательное чтение, ведь Шадид не был разработчиком в те годы, это лишь некая ретроспектива.

Впрочем, если вы вошли в разработку лишь в последние пару лет и не до конца понимаете, что же означает кроссбраузерность на самом деле – вот самое то.

Плюс, дана краткая справка по нынешнему состоянию дел.

👉 @htmlshit
#css #supports

#заметка дня

Давайте сегодня поговорим том, что иногда то, что выглядит как грид, на самом деле так же легко реализуется флексами. Ну мало ли.

Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.

Первая мысль –  перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?

Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL

И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd

Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.

Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw

А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm

#css #flexbox #grid

#статья дня

Это настолько великолепная и нужная статья, что я решил не ждать до следующих будней.

Итак, нужны ли вендорные префиксы в 2021 году?

Короткий ответ: да, нужны.

Длинный ответ, собственно: https://css-tricks.com/is-vendor-prefixing-dead/

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

Статья предоставляет детальный разбор каждого свойства под актуальные (not dead) браузеры в виде таблиц и примеров.

Да ёлки, она даже как закладка хороша!

#css #vendorprefix #crossbrowser

⚡️ Знаете ли вы, что в телеграм есть канал, на котором публикуются анонсы бесплатных онлайн-мероприятий по разработке — @ITMeeting?

Здесь вы найдете митапы и конференции на любой вкус - backend, frontend, QA, DevOps, AI, ML, BI и многое другое!

Подписывайтесь на канал @ITMeeting, чтобы не пропустить интересные мероприятия по своей специальности!

#реклама

#инструмент дня

Для понимания того, как работает 3D в CSS, очень важно иметь перед глазами что-то более наглядное, чем бесконечные красивые CodePen’ы. И теперь такая наглядная шутка есть. Встречайте: генератор кубов на CSS. Ну и параллелепипедов.

Экспорт в Pug+SCSS, HTML+CSS. Ну и их комбинация, очевидно.

На мобильных, конечно, грустно :) Впрочем, разработке всегда можно помочь.

👉 @htmlshit
#css #3d #generator

#фишка дня

Наверняка вы встречали подобные (на иллюстраци) предложения по генерации пароля. Заставить браузер предложить подобное на форме регистрации довольно просто: достаточно установить значение атрибута autocomplete как new-password.

Это не первый раз, когда у нас заходит речь об этом зачастую раздражающем атрибуте. Например, не так давно я писал заметку о том, как заставить Safari перестать пытаться исправить ваш одноразовый код: https://t.me/htmlshit/477

Но нелишним будет ещё раз напомнить: не забывайте про MDN. Все возможные значения автодополнения там отлично расписаны: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

#css #autocomplete #password

#заметка дня

CSS очень хочет заменить JS в декларативном описании реакции интерфейса на действия пользователя.

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

Ну ладно, анимации по наведении и клику ещё. А по скроллу?

Вы не поверите, тоже можно! Ну, почти.

Но обо всём по порядку. Заметка здоровая, будет две части.

Давайте сначала набросаем простой пример: пользователь прокручивает блоки и в определённые моменты начинают выезжать панели. Не просто появляются, а реагируют на положение полосы прокрутки. Проще показать уже: https://codepen.io/alinaki/pen/LYWVeBV

Для упрощения демонстрации каждая секция занимает целый экран, но можете мне поверить, приведённый пример будет работать даже в случае, когда у вас секций много и они разной высоты. Если интересно, как такие вещи рассчитываются — пишите в @htmlshitchat ваши комментарии,  попробую после разложить немного геометрии.

Отдельно хочу заметить, что лет пять назад Safari останавливал event loop на время прокрутки страницы. Приведённая техника просто бы не заработала!

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

Но  на любую гайку найдётся свой хитрый болт, и тогда таким болтом стал... requestAnimationFrame! Неожиданно, не правда ли? И всё ещё актуально если анимации очень тяжёлые!

Итак, секрет в том, что мы запускаем запрос кадра и внутри него слушаем всё тот же window.pageYOffset.

Почему его? Потому что document.documentElement.scrollTop тогда в Safari не обновлялся, вспоминаем остановленный event loop.

И вот выходит рабочий вариант: https://codepen.io/alinaki/pen/QWpwXNN

У него есть одна достаточно серьёзная проблема, попробуйте отгадать, какая. Но она очень и очень легко решается.

А через пару дней мы с вами проделаем то же самое на самых современных API 😉 И тогда я поясню, что же такое имелось в виду в самом начале заметки.

#css #js #scroll #animation

#ссылка дня

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

А вот создатели CSS таких ошибок наделали достаточно много. Есть даже список: https://wiki.csswg.org/ideas/mistakes

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

Ну ок, не всё в этом списке стоит квалифицировать как ошибки. Что-то просто можно было сделать лучше, а что-то вообще выстрелило случайно.

Вот краткий список того, что там есть:
1. white-space: nowrap должен был быть no-wrap
2. box-sizing должен был border-box (прим. больно, да?)
3. border-radius должен был называться corner-radius (прим. правда что, какое отношение к границе оно вообще имеет?)
4. взаимодействие flex-basis и width/height слишком сложное (прим. потребовалось две версии флексбокса чтобы всё равно сделать сложную хрень)
5. нынешнему :empty стоило бы именоваться :void, а сам :empty должен был бы игнорировать пробелы (и вот это, кстати, уже исправлено в спецификации!)

Вообще, почитайте. Там много интересного, очень круто.

#css #specification

#заметка дня

Ну что, настало время второй части заметки про анимацию по скроллу: https://t.me/htmlshit/614

На сей раз в дело идут самые современные API.

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

Да в общем, не так много: высота документа, высота видимой области экрана, координаты "начала" и "конца" элемента относительно документа и видимой высоты экрана, статус прокрутки.

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

Но ведь браузеру и так это всё уже известно! Неужели нельзя упростить? Так вот, можно. Ну, почти. И для этого создаются новые браузерные API под общим именем ScrollTimeline: https://wicg.github.io/scroll-animations/

Черновик, понятное дело.

Выражаясь формальным языком, роль временной шкалы для нашей анимации будет выполнять, собственно, скроллбар. Точнее, процесс его прокрутки. Контроль — в руках пользователя.

Набросаем код для логики, описанной выше. Самое интересное: никакого псевдокода! Итак:

@scroll-timeline fill {
 source: selector(body);
 scroll-offsets: selector(#id) end 0, selector(#id) end 1;
 time-range: 1s;
}

Давайте разбираться, что же здесь написано:

@-правило scroll-timeline сообщает браузеру, что мы собираемся использовать состояние прокрутки документа и передаём набор правил с именем fill.

source: источник данных о скролле, в данном случае, тело документа, но можно передать или body или id элемента. С классами не выйдет. Тем не менее, как вы могли догадаться, следить за скроллом можно где угодно.

scroll-offsets: здесь происходит вся магия. Используя селектор нужного нам элемента (или нескольких) мы можем указать, в какой же конкретно момент начинать и заканчивать нашу анимацию. Вырезать только нужную часть временной шкалы, если желаете.

Причём, start и end обозначают состояние полосы прокрутки (сверху вниз), а числовые значения — состояние видимости элемента, где 0 — находится за пределами видимой области экрана и 1 — хоть немного виден.

Конечно, можно и просто указать абсолютные значения, например: 100vh, 200vh.

Только такое дело... В Chrome сейчас это не работает, нужно указывать отдельно правила start и end. Баг уже заявлен.

time-range:  отображение длительности нужной анимации на скролл. В сухом остатке, если ваша @keyframes-анимация длится 1 секунду, а time-range равен 2 секундам, то ваша анимация закончится ровно на половине указанного интервала прокрутки.

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

animation: 1s linear forwards fill;
animation-timeline: fill;

Если вы сейчас такие довольные побежали это всё пробовать, спешу вас разочаровать: всё это в глубокой бете. Чтобы потестировать в Chrome, нужно пройти на страницу скрытых настроек и включить Experimental Web Platform Features: chrome://flags/#enable-experimental-web-platform-features

И вот теперь можно посмотреть пример: https://codepen.io/alinaki/pen/NWpqyrO

По-моему, прекрасно. Было бы, если бы работало везде.

Но не всё так грустно! Ведь помимо черновика CSS-спецификации готовится и JavaScript API. А что это значит? Что можно найти полифилл!

И ведь правда можно: https://github.com/flackr/scroll-timeline

Одна проблема: на этот полифилл нужен ещё один полифилл, потому что не все браузеры поддерживают современную объектную модель CSS. А ещё нужен Web Animations API... чота сложно.

Тем не менее, вуаля: https://codepen.io/alinaki/pen/XWMbGRa (подключение полифилла там не самое простое, задавайте ваши вопросы в @htmlshitchat; интересующий вас код — с 55 строки).

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

#css #animation #timeline #scroll

#wtf дня

Только что обнаружил, что открытые Chrome DevTools предотвращают выключение экрана на MacBook. Учитывая, сколько окон инспектора у меня открыто каждый день — немудрено, что ноутбук не выключает экран с некоторых пор.

Это, мягко говоря, раздражает.

Если кто знает, как это исправить — буду очень рад предложениям.

Upd. 1

Есть открытый баг для Windows, не я один страдаю: https://bugs.chromium.org/p/chromium/issues/detail?id=1208711&q=prevent&can=2

Upd. 2

Если инспектор открывается внутри основного окна – запрета выключения экрана не происходит.