#статья дня

Введение в SVG-анимации для верстальщиков

На моей памяти Хабрахабр умирал уже раза три.

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

На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/

Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.

В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).

#svg #css #animate

#codepen дня

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

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.iss.one/htmlshit/508

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

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter

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

Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.

Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:

https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
https://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.

https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.

https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.

Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Пост был бы неполон без https://codephoto.ru/

С этим сервисом вас ни в один чат не пустят :)

Миру нужна красота.

#til дня

Волшебные 9999px для border-radius работают не только в CSS, но и во Flutter тоже.

Всё, не могу говорить, побежал. Подробности последуют.

#flutter

#заметка дня

Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?

Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.

Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29

Сам автор issue говорит, что без пол-литра картинок там не разобраться. Cut the crap, они пошли по третьему варианту: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap

Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 10000px (проще считать) и прямоугольника размером 320x240px, углы начинаем с верхнего левого (Top Left):

TL: 320/20000 vs 240/20000
TR: 320/20000 vs 240/20000
BR: 320/20000 vs 240/20000
BL: 320/20000 vs 240/20000

0.016 vs 0.012 в каждом случае

Итого, 0.012 — минимальное значение коэффициента приведения радиуса.

10000 * 0.012 = 120.

Половина высоты, выходит. Проверяем себя: https://codepen.io/alinaki/pen/jOxRwJJ

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

Во Flutter используется геометрия кривых и понять это пусть всё ещё проще, чем структуру исходного кода Chromium, но всё равно сложно. Тем не менее, имеются упоминания, что радиусы приводятся к минимальному значению размерности.

И да, 9999px это совсем не то же, что 50%, опять же — смотрите спецификацию, там эллипсы. Но в случае квадрата — и там и там будет круг.

#geometry #borderradius #css #flutter

#фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

#css #html #input

#заметка дня

Что-то вчерашняя заметка про border-radius: 9999px внесла сумятицу в молодые умы. Я решил, что нужна ещё одна.

На сей раз с иллюстрацией

Итак. 9999px — это просто моё любимое число.

Взамен 9999px можно использовать 100vmax, infinity, calc(1px / 0). Все же помнят соглашение, что деление на ноль даёт бесконечность?

Результат будет один: мы получим скруглённый прямоугольник.

Если же вы выставите 50% — получится эллипс с радиусами в 50% ширины и 50% высоты, на иллюстрации справа.

Разница очевидна, и нам редко нужны эллипсы в жизни. А так хотелось квадруг… (squircle). Ну да ладно.

Обновил кодпен: https://codepen.io/alinaki/pen/jOxRwJJ

Ну и конечно, вынесу сюда ссылку на обсуждение (спасибо Илье Стрельцыну) внедрения в CSS значения border-radius равного round, чтобы убрать этот кажущийся «хак»: https://github.com/w3c/csswg-drafts/issues/6467

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

#geometry #css

#видео дня

Многие до сих пор страдают от карго-культа при выборе формата изображений для своих проектов. Кому-то сказали использовать webp везде и прикрутить к сайту декодер, кто-то до сих пор считает, что SVG всегда лучше PNG для технических изображений, а кто-то — что нужно поставлять на каждое устройство свой набор разрешений.

Но для начала — нужно разобраться в самих форматах и понять, что не всё так просто. А не слепо следовать за не всегда разумными утверждениями.

https://www.youtube.com/watch?v=CMlXUS6e46w

#video #img #png #jpg #webp

#книга дня

На сцене снова (раз, два) Александр Беспоясов. На сей раз с книгой «Refactor like a superhero».

Выложена на Гитхабе, на двух языках: русском и английском. Выбирайте любой, засылайте PR-ы на исправления и дополнения.

Читаем, не стесняемся!

#book #refactor

#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material

#заметка дня

Если вы делаете тестовое и вариантах приёмки сказано: «Архив или ссылка на репозиторий» всегда делайте репозиторий.

Оценивающему всё равно, сколько было потрачено времени. А вот процесс — интересен. Прислав архив вы сразу получаете мнимый минус. Его же надо распаковать, открыть в редакторе…

В репозитории на гитхабе достаточно нажать точку.

Ну и, очевидно, не пихайте всё одним коммитом.

Ну и читайте мою копию треда про собеседования, конечно: https://t.iss.one/htmlshit/1326

Не ссыте, котаны. Рассылайте резюме и ищите работу мечты.

Тока с умом.

#work

#такое дня

Что-то меня задело сегодня высказывание, что я тут мало по вёрстке выкладываю.

По-моему, я тут только про вёрстку и выкладываю. И лично мне хотелось бы больше хардкора и историй за жизнь.

Но ок, завтра будет хардкор по вёрстке. Всё и сразу. Надо немного подготовиться только. Держитесь там.

Ну и как всегда — делитесь, что хотели бы увидеть.

#css #js #geometry

#заметка дня и #codepen

Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.

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

Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.

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

Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.

Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.

Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010

P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.

#css #geometry

#статья дня

На сайте последней конференции по Next.js многих поразила WebGL-реализация прохождения света через призму. Возможно, не самая физически точная, но от этого не менее потрясающая.

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

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

Да даже мой предыдущий пост должен был стать большой статьей… но лень да и формат Телеграма просто не позволяют это сделать.

Поэтому рекомендую обратить пристальное внимание на статью от, собственно, авторов призмы: https://vercel.com/blog/building-an-interactive-webgl-experience-in-next-js

Все шаги, от прототипа и расчетов до оптимизации производительности. Делается все на react-three-fiber. Настоятельно рекомендую пойти и пройти их самостоятельно.

#webgl #react

#codepen дня

Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?

Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.

Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX

Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/

А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/

А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html

А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ

#css #mixblendmode

#фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

Ну, на самом деле, нет. Если вы упоро упёртый любитель контекстов и отрицаете любые внешние стейт-менеджеры, то запросто можете оказаться в подобной ситуации. Да даже если и не отрицаете, всё равно пара-тройка контекстов там будет.

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!

const AppProvider = compose(
  UserProvider,
  ThemeProvider.
  MenusProvider,
  SupportProvider,
  ErrorProvider,
  StateProvider,
);

И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose

#фишка дня

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

Казалось бы, ну и что такого? Все браузеры подгрузят первый кадр видео и покажут его.

Да. Но нет. Safari не подгрузит. И что делать, если нужен не первый кадр?

Всё очень просто! Крис Койер пишет: «Просто добавьте #t=0.01 к урлу (в src)». Смотрим видео — работает :) Кто не понял — это просто проход по таймлайну.

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

К слову, в некоторых промо-проектах бывает весьма сподручно заменять анимации и 3D на контролируемое видео. Чтобы не происходило скачка при начале проигрывания — как раз лучше отказаться от постера и прибегнуть к технике с t.

Вот свежий и яркий пример — книга рецептов-игра: https://www.themagicalpantry.com/

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

#video #safari #poster

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

Забавный обучающий проект посвящённый DOM Events (событиям объектной модели документа). Кликам и фокусам, короче.

Что такое target, bubble, propagation? Всё показано максимально наглядно.

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

Итак, встречайте: https://domevents.dev/

#js #dom #education