#codepen дня

Устроим перепись олдов на канале? Кто ЛогоМиры помнит?

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

Кэсси Эванс придумала, что ЛогоМиры забавно ложатся на правила отрисовки SVG-кривых и сообразила сегодняшний кодпен дня.

Так что если вам интересно, как происходит отрисовка SVG — а на самом деле, там реально очень всё похоже на команды той самой черепашки — милости просим: https://codepen.io/cassie-codes/pen/ZEvNBmX

#svg #logo #бородач

#фишка дня

Тут оказалось, что в Chrome DevTools встроен редактор кривых Безье для переходов aka transition!

Можно добавить точку, перетащить её и сразу посмотреть результат. Ну или выбрать из готового набора: linear, elastic, bounce, emphasized.

А в версии 116 добавят линейные функции переходов, linear(), о которых нам ещё только предстоит поговорить: https://developer.chrome.com/articles/css-linear-easing-function/

#devtools #css #linear #curve

#статья дня

В период пандемии средства для совместной работы пережили самый настоящий бум. Особенно взлетели видеоконференции и вайтборды (ну, доски с заметками, только онлайн). Успех того же Miro известен всем.

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

Но нас все же интересует не бизнес сторона вопроса, а технологические решения.

И тут нам очень повезло! Они выкатили в своем технологе огромную статью с описанием технических решений своей доски. Упор делали на производительность, потому остановились в итоге на чистом WebGL. Но вот что интересно: React+DOM не то чтобы критично медленнее, вполне себе конкурентноспособно.

В общем, это мы читаем: https://www.atlassian.com/engineering/rendering-like-butter-a-confluence-whiteboards-story

В статье полно ссылок на открытые проекты и концепции вообще. Крайне рекомендую.

#webgl #whiteboard

#такое дня

Я сделяль!

Не в первый раз, впрочем :) Пять лет назад в Хуахине: https://t.iss.one/htmlshit/106

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

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

Мой ТВ-пульт на Flutter уже, в принципе, умеет всё то, что необходимо мне. Так что скоро ждите обновлений в постах!

Но, как обычно, после проделывания 80% работы, остаётся ещё 80%. Это простая математика.

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

Пробежавшись по библиотекам анимаций во Flutter я обнаружил, что некоторые из них не стесняются просто брать и копировать CSS-наборы. А почему нет?

И вот вашему вниманию один из таких наборов: CSShake.

https://elrumordelaluz.github.io/csshake/

И копирующий его пакет Flutter: https://pub.dev/packages/flutter_shake_animated

Не совсем то, что мне нужно, разве что API подсмотреть. Но, может, кому-нибудь такой угар пригодится 😝

#css #animation

#баг дня

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

Итак: в Chrome не поддерживаются такие правила для clip-path как: margin-box, border-box, padding-box и content-box. В Firefox и Safari всё ок. Пример: https://codepen.io/thebabydino/pen/yLGyBrw

Ссылка на трекер: https://chromium-review.googlesource.com/c/chromium/src/+/4784067

Баг исправлен, но задерживается из-за рефакторинга. И сейчас в состоянии конфликта слияния.

А теперь по-русски 🙂

В потоке размер элементов считается довольно сложно. Элементы можно представить как вложенные прямоугольники: отступы — margin, границы — border, поля — padding и содержимое — content — которое ограничено или типографически, или теми же прямоугольниками.

Потом веселье со схлопывающимися отступами или же включением границ в размеры объекта (box-sizing)... зависит от режима потока.

Зачем вам может понадобиться подобное — я не знаю. Но CSS-художникам это очень и очень мешает 🙂

Впрочем, исправление не за горами.

#clippath #css

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

А что если бы был такой UI-фреймворк, чтобы можно было запилить браузерку про космос и прочий киберпанк?

Оказывается, такое есть! Называется Arwes: https://arwes.dev/

Выглядит очень круто. У меня ассоциируется с чем-то из начала нулевых, но в хорошем смысле. Просто все ассоциации оттуда: StarCraft, Warfare Inc., Homeworld...

Учитывая, что во многих, даже AAA, играх интерфейс управления рисуется с помощью веб-технологий, создатели Arwes совсем не впустую работают 🙂

Страница примеров всё ещё в разработке, зато их песочница вполне себе доступна и очень крута: https://arwes.dev/play

Крайне рекомендую прокликать, вдохновляет.

#react #ui #future #games

#фишка дня

Хотите самый простой способ анимирования появления/исчезания элементов? Их есть у меня!

Правда, как всегда, пока только в Chrome. Но требующиеся изменения настолько мелкие, что это вообще неважно.

Итак, встречайте: View Transitions API. Вот даже ссылочка на MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

1. Задали имя вашего слоя: style="view-transition-name: unique-name"
2. Вынесли добавление HTML в отдельную функцию aka mutate()
3. Вызвали её коллбеком в document.startViewTransition(() => mutate())
4. ...
5. Вы прекрасны!

Вот накидал вам быстрый пример: https://codepen.io/alinaki/pen/VwqLpvX

Основан на вот этих двух: раз и два.

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

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

#css #view #transition

#статья дня

Итак, ты решил анимировать скрытие элемента aka display: none...

.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 2s linear;
display: block;
}

.hidden {
display: none;
opacity: 0;
}


И получил в щи: элемент моментально скрылся и всё тут. Потому что display: none не анимируется.

И начинается: игры с таймаутами, попытки в анимацию по ключевым кадрам, transitionend, я уже молчу о каком-то дичайшем количестве кода под React просто чтобы плавно убрать элемент с глаз долой и с DOMа вон.

Но мы дождались подвижек. Что принёс нам Chrome 116? Вот что: анимируемые display и content-visibility.

Пример: https://codepen.io/web-dot-dev/pen/qBQeojK

Ну и статья, в которой, помимо прочего, описывается ещё много новых плюшек: https://developer.chrome.com/blog/entry-exit-animations/

Например, @starting-style для описания поведения элемента при вставке в DOM.

Хорошие времена нас ждут. Пусть только Safari и Firefox подтянутся 🙂

#css #animation

#заметка дня

Что-то я оборзел, пять дней без постов. Зато вы не отписываетесь. Устроил себе длинные выходные.

Знаете, чего я ждал? Выхода Firefox 117, чтобы в очередной раз поворчать!

Итак, начиная этой версии Firefox поддерживает нативный CSS nesting aka вложенность. Да-да, как практически любой из препроцессоров. То есть:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    .awesome {
      color: deeppink;
    }
  }

  &.alt {
    color: cyan;
  }
}

Амперсанд (&) здесь ссылка на родителя, которую, очевидно, можно использовать где угодно. Но нельзя кешировать :(

А теперь, внимание, клоунада! 🤡

Firefox 117 поддерживает последнюю версию спецификации, в то время как текущие Chrome и Safari — предыдущую. Что это значит?

То, что клятый амперсанд надо ставить даже в определении вложенных селекторов, а не только в композиции. Но не надо перед селекторами потомков и соседей — это >, + и ~:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    & .awesome {
      color: deeppink;
    }
  }

  &.alt {
    color: cyan;
  }
}

Потому без магии PostCSS опять не обойтись, используйте плагин postcss-nesting. Или оставайтесь на SCSS.

Ну и на закуску, моё мнение о нестинге вообще: https://t.iss.one/htmlshit/697 Не то чтоб вы его просили, но я такой.

#css #nesting

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

Я когда готовил пример для поста про View Transition API, обратил внимание, как написан один из CodePen'ов, на которые я опирался. Конкретно, вот этот: https://codepen.io/argyleink/pen/GRPRJyM

Что же с ним не так? Да вроде всё так, но он импортирует нечто под названием open-props и потом использует какие-то переменные в коде...

Итак, оказалось, это — прости, господи — субатомные стили под названием Open Props: https://open-props.style/

Как можно догадаться, названы они так в пику атомным стилям типа Tailwind CSS, Assembler CSS, Tachyons или Windi CSS. Или любой другой попытке бакендеров сделать свой UI-кит.

Вот только вышеописанные наборы оперируют классами, а Open Props — переменными. Они предлагают интересный набор из цветов, размерностей, анимаций, теней и даже градиентов. Особенно меня порадовали типографические шлюзы aka clamp (Fluid sizes в терминологии фреймворка).

Получается что-то такое:

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

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

В общем, интересный подход. Точно имеет право на жизнь.

#css #var #variables #ui #kit

#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education #бородач

#codepen дня

Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу

Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!

Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂

Предыдущий пост был вот: https://t.iss.one/htmlshit/1867

Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.

Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100

Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.

В общем, вдохновлять людей — приятно. Рекомендую!

#css #goo #filter #svg

Журнал "XOR" – мастхев для любого программиста. Освещаем новости, обновления, мемы и много кодинга. 

Присоединяйся к самому большому сообществу программистов: @xor_journal

#игра дня

Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?

Вы по адресу!

Интерактивное руководство: https://bezier.method.ac/

Я, правда, так ничего и не понял. Ничего не получилось. 🙁

#vector #bezier #tool #learn #бородач

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

Что быстрее всех на свете?

Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)

Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?

Вот: https://lightningcss.dev/

Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.

Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.

Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.

Кстати, молния понимает @import, за бандл не беспокойтесь.

И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39

Пробуем?

#css #lightningcss #rust

#заметка дня

Как разместить иконки на странице или в web-приложении?

Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.

По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.

SVG-файл становится контейнером таких символов:

<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg>

И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто:

<svg xmlns="https://www.w3.org/2000/svg" width="32" height="32">
<use href="icons.svg#icon-circle" />
</svg>

Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.

Но как этим пользоваться, например, в React?

Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js

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

Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)

Всем спрайт, котаны!

#svg #symbol #sprite #react #бородач