Да, это было безумно медленно с точки зрения длительности процесса сборки и разработчиков вроде меня, привыкших к классической генерации HTML, приводило в ужас: только вдумайтесь, огромная мешанина всего на свете внутри одного JS-файла и чтобы вытащить всё наружу требовались плагины-экстракторы, ну просто смешно. Но это позволяло писать и выкатывать фичи очень быстро, используя современные возможности языка. Никто не хотел оглядываться на генерацию HTML на PHP и прочем. Обратился к API, сгенерировал HTML на клиенте — и всё, мухи отделены от котлет.

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

1. HTML и DOM
2. CSS и SCSS/LESS
3. JavaScript, ES Modules
4. Командную строку
5. Базу Node.js и npm
6. Конфигурацию Webpack
7. Конфигурацию Babel
7. AJAX/AHAH и API

И где-то тут появляются полновесные фреймворки/UI-библиотеки вроде React.js с его дополнительным языком JSX, Vue.js с его концепцией скоупов, Ember.js с его классическим MVC и утилитами командной строки и Angular 2.0 на чём-то с названием TypeScript.

И всё бы ничего, но мы ведь говорим о потоковой промышленной разработке, где всё это помогает писать код очень и очень быстро и находиться на острие прогресса. А теперь поставьте себя на место начинающего разработчика, которому сказали:

«Так, вот это командная строка, тебе надо скачать Node.js вот отсюда, написать вот такую команду, установить с десяток пакетов, теперь взять Webpack, написать конфигурацию (в смысле, ты хочешь многостраничник? зачем?), импортировать SCSS внутрь твоего JS, раскатить перезагрузку по сохранению страницы... а отладчик у тебя будет в браузере, вот по F12. Ах, не понимаешь, что там написано? Так тебе ещё нужны source maps, чтобы склеенный минимизированный код расшифровывать».

Вам не кажется, что это малость далековато ушло от «вот блокнот, вот браузер»?

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

Есть только одна проблема: люди просто хотят чтобы по нажатию на кнопку браузер с ними поздоровался.

И я попробую дать своё предложение в итоговой части, не стану затягивать.

#заметка дня

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

Зачем пытаться развернуть весь стек у себя на компьютере, если есть решения вроде https://codesandbox.io/? Туда же replit.com и codepen.io

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

При этом делать на таких ресурсах можно практически всё, что угодно (на CodePen чуть меньше): создавать веб-страницы, писать на React и Vue, загружать файлы, ставить пакеты Node.js, выставлять на всеобщее обозрение. Захотелось большего — песочницы позволяют редактировать конфигурации и поднимать уровень сложности. Вплоть до полноценной виртуальной машины.

На десктопе такой опыт доступен или в платных IDE, или путем сравнительно долгой (для человека без опыта) настройки окружения. Курсы и видео же предпочитают платные IDE не упоминать по очевидной причине — меньше поток людей.

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

И, конечно, постарайтесь разобраться с базовым владением компьютером и английским языком до того, как начнёте пытаться что-то делать: научитесь отличать /, от ./, ../ и https://.

Чтобы не страдать с настройкой Webpack и отладкой кода после упаковки, есть прекрасные современные средства вроде Parcel, Vite и Snowpack, которые не станут запутывать ваш код так, что вы не сможете даже с отладчиком его распутать. Все браузеры уже давно умеют в поддержку модулей, всё, что вам нужно — это сервер и немного прослойки к пакетам, чем эти инструменты и являются.

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

Поддержка фишек JavaScript в современных браузерах сейчас на своём пике. Всё, что вы найдёте в руководствах по JavaScript — будет там. Даже CSS и тот поддерживает вложенность, если вам так лень писать классы.

На ваши HTML-файлы на файловой системе вполне можно ссылаться, для этого не надо поднимать сервер, достаточно понимать, что такое ./.

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

А разбивать себе лоб промышленной разработкой на самом старте не имеет никакого смысла.

#итоги года

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

Но мы-то с вами знаем, что настоящие итоги — они в State of JavaScript, State of CSS (правда эти ребята почему-то закрыли итоги года аж в июле) и CSS Wrapped 2023.

Опрос State of JavaScript открыт прямо сейчас. И пусть вас не смущает то, что это опрос — каждый вопрос это возможность узнать о существовании чего-то нового. Авторы спецификаций и статей тюнят маркетинг таким образом и знают, о чем стоит писать :)

CSS Wrapped же просто большая статья всех появившихся фишек CSS в этом году. А было много чего: has к концу года будет во всех браузерах, контейнерные запросы с нами, вложенность уже везде.

Тока ради бога не пытайтесь понять русский перевод в CSS Wrapped. По всей видимости, машинному переводу от Google ещё очень далеко до понимания контекста... Обёрнутый CSS, my ass. Gemini, говорите? Ну да, ну да 🤡

P. S. Wrapped в данном контексте переводится как «подведенный к итогу», «итоговый», от словосочетания «wrap up», что значит «summarize». И понятное дело, под Новый год получилась игра слов, будто подарок под ёлку.

#stateofjs #css #js

#фишка дня

Итак, сегодня я спросоня долго смотрел на этот пример от Джея и никак не мог понять, какого фига тут происходит.

Не, ну я вижу, что в итоге получается градиентная граница, но... но почему?

И тут до меня дошло: оказывается, при настройке фона можно фактически указывать боксовую модель! Ну то есть называется-то оно background-origin, но по факту работает по тем же принципам, что и box-sizing.

Итак, три значения: border-box, padding-box и content-box.

Выходит, border-box заполнит фон, включая границы, padding-box — до полей, a content-box — по контенту.

Ну и для градиентных границ (к сожалению, только с непрозрачным фоном), получается так:

article {
  background: // layer them up with different origin!
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient) border-box;
  border: 4px solid transparent;
}

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

Ну и пример, конечно же: https://codepen.io/alinaki/pen/QWYoPpx

#css #background #origin

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

Важной частью процесса разработки является сканирование уязвимостей в коде и зависимостях. А ещё более важной — слежение за ними.

И этот процесс было бы неплохо автоматизировать.

Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.

И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/

Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.

Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs

И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin

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

#security #vulnerability #scan #audit

#баг дня

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

inb4 я в курсе, что большинство подписчиков из РФ и Stripe там не работал никогда, но мой поинт не в этом, принцип работы платёжных систем на клиенте одинаков.

Тут вы замечаете, что 1-2% пользователей не могут завершить покупку. И никак не можете понять, что же не так. И всё как-то нестабильно при этом... то могут, то не могут.

В какой-то момент до тебя доходит, что проблемные пользователи сидят на нестабильном интернете или за VPN. Включаешь Throttle на вкладке Network — и, чудо, повторяешь проблему!

Не очень понятно, почему сразу нельзя было залезть на гитхаб официальной клиентской библиотеки, но выясняется, что проблема стара как говно мамонта, сразу даю ссылку на повтор: https://github.com/stripe/stripe-js/issues/26#issuecomment-1477716731

Конечно, если говну мамонта 4 года. Но это именно так в случае подобных библиотек.

Проблема прям настолько простая, насколько вообще возможно: люди на нестабильных соединениях могут быть неспособны загрузить библиотеку.

Но, более того, загрузчик реализован таким образом, что если ты попытаешься реализовать повтор загрузки самостоятельно, у тебя не выйдет. Стоит получить "Error: Failed to load Stripe.js", поможет только перезагрузка страницы.

К счастью, Stripe, наконец, выпустила решение: https://github.com/stripe/stripe-js/pull/518

И оно потрясающе простое: удалить упавший промис и дать возможность создать его заново.

Я почему вообще это вынес, пусть многие никогда с проблемой Stripe и не встретятся: надо быть очень внимательным, загружая код по запросу. Всегда думать о возможности перезапустить загрузку и не позволять коду оставаться в подвешенном состоянии.

Да и PR достаточно прост, чтобы понять принцип работы подобных решений.

#stripe #promise #defer

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

Ох что я вам нашёл! Просто пушка.

Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.

Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!

Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.

Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda

Демо: https://eruda.liriliri.io/

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

В общем, забавная вещь! В какой-то момент может и выручить.

#js #devtools #mobile #бородач

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

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

Неправильно! Быстрее всех на свете 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 #бородач

#фишка дня

А приходилось ли вам, котаны, плавно менять текст?

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

Причина, по которой это происходит, не уложится в один пост: это много-много математики цвета и режимов смешивания. Для такого у меня подготовлена вам целая статья: https://jakearchibald.com/2021/dom-cross-fade/

А фишкой же дня будет простое решение проблемы:

mix-blend-mode: plus-lighter;

И мерцания как не бывало. Особенно заметно на больших объёмах текста.

Пример: https://codepen.io/alinaki/pen/zYeVdgX

#css #blend #mix #color

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

Нужно ли вам представлять date-fns? Думаю, нет. Но всё же: это небольшая и весьма эффективная библиотека для работы с временем и датами. В отличие от (уже устаревшего) moment.js она не является монолитной и во многом опирается на современные API.

Так вот, сегодня вышла третья версия и она знаменует собой большой шаг вперёд:

- операции с датами в честном UTC (и поддержка расширений класса Date)
- только именованные экспорты
- плоская структура модулей
- 100%-е покрытие типами TS (библиотека полностью переписана на TypeScript)

Полный список изменений и немного истории создания можно почитать в блоге разработчиков: https://blog.date-fns.org/v3-is-out/

#date #lib

#заметка дня

Почему-то так получилось, что на канале очень мало WebGL и я даже React Three Fiber не обозревал. Думаю, надо исправить.

Давайте сразу ссылку на демо из видео, а потом поясню, что к чему: https://nrzns4.csb.app/

Итак, для работы с производительной 3D-графикой у нас имеется WebGL. Но работать с сырым API никому не охота, поэтому вокруг него образовалась куча фреймворков, и наиболее популярный — Three.js.

А вот чтобы объединить React-приложение и сцену (так принято называть 3D-работы) — имеется интересная штука с названием React Three Fiber. В итоге можно с лёгкостью смешивать HTML, хуки, сцены и вообще любой код вместе.

Как-то так:

<Canvas camera={{ position: [0, 0, 20], fov: 15 }}>
  <Lens>
    <Background />
    <Words />
  </Lens>
</Canvas>

Кажется странным, но если вспомнить, что JSX это не что иное как вид вызова функций и передачи аргументов — и всё встаёт на свои места.

Давайте уже к разбору примера. Когда-то давно мой однокурсник забрал RedDot Award за сайт яичного протеина: https://minglabs.com/our-work/pumperlgsund/

Особый кайф был в бутылке, которая искажала текст за собой. Да, зная о том, что это "всего лишь" карты нормалей — магия уже не кажется такой магической, но менее интересным это не становится. И я подумал, было бы забавно повторить этот эффект на React Three Fiber, хотя бы на минимальном уровне.

Если имеется желание сразу перейти к коду, то вот: https://codesandbox.io/p/sandbox/lens-component-nrzns4

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

Необычно, что работать пришлось в полярных координатах, но простота, с которой добавлялись компоненты мне очень зашла, почти как писать обычный сайт!

Следующим шагом надо попробовать сделать портал, чтобы линза, например, работала как рентген. Или новогодний шар! Или параллакс.

В общем, давайте ваши предложения, котаны.

#webgl #3d #react

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

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

Вот он, CSS Selectors: A Visual Guide: https://fffuel.co/css-selectors/

Однозначно подойдёт даже опытным верстальщикам: освежить знания про ~, $= и удостовериться, что ты понимаешь :has — очень полезно.

Удобная навигация, иллюстрации, конечно, не Джош Комо и даже не Ахмад Шадид, но с задачей справляются :)

Кстати, https://fffuel.co/ в принципе очень большой проект с кучей разных инструментов для генерации интересных градиентов и паттернов. Точно стоит вашего внимания, котаны.

#css #education

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

Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.

А единой документации по этим типам нет!

Точнее, не было, но теперь вышел https://tsdocs.dev/

Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.

К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?

Я вот — к имплементации, прыгать к типам меня раздражает.

#typescript #dts #types #doc

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

Есть категория инструментов, наиболее сильные в тех средах, которые все кругом ненавидят.

Это всяческого рода таблицы с CRUD- (Create-Read-Update-Delete) возможностями.

Несложно догадаться, что наиболее прокачаны они в разного рода энтерпрайз-фреймворках (на Java и C#), под общим названием GridView, в Sencha Ext JS и... в том же 1С.

Ну ещё бы бухгалтерская платформа не умела в таблицы.

Для веба их в целом огромное количество, но многие из них, как тот же Ext JS, разрабатывались последние лет 20, выросли в огромных слабо поддерживаемых монстров. Казалось бы, ну уж за столько времени можно написать что-то гибкое и универсальное? Да не особо. И ещё денег просят.

К счастью, прогресс не стоит на месте и у нас уже есть несколько прекрасных гридов. Одним из самых крутых, несомненно, является универсальный TanStack Table (бывший React Table): https://tanstack.com/table/v8

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

И пример такого рабочего грида мне на днях прислал подписчик: Material React Table.

Ссылка: https://www.material-react-table.com/

Как раз пару месяцев назад у них вышел новый релиз.

Если TanStack Query оставляет выбор UI-кита за вами, то MRT, как несложно догадаться, берёт за основу MUI (Material UI до версии 5) и добивает плюшками и полновесными примерами.

Отличная документация, готовый код прямо на главной странице. Имеется сравнение с конкурентами (куда ж без этого).

В общем, рекомендуем, котаны :)

#js #table #crud #grid

#фишка дня

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

Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.

Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.

Я сел на книгу с каламбурами, простите.

Казалось бы, вот оно, счастье! Пишем что-то такое:

input:invalid ~ .invalid-message {
  display: block;
}

...и получаем сообщение о незаполненном поле!

Ага, хрен там.

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

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

Что же делать?

Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.

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

Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.

Есть ещё концепция touched, когда ввода не было, но произошло событие blur.

Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE

Согласитесь, это уже похоже на удобную валидацию, котаны!

#css #validation #required #forms

#релиз дня

Итак, котаны, что мы с вами пропустили?

А пропустили мы релиз Firefox 121!

Что в нём такого важного? Ну, как минимум, поддержка :has aka родительский селектор!

Конечно же, он не родительский, но то такое.

Теперь поддержка имеется во всех трёх движках, а это значит, что можно вовсю применять!

На что способен :has

1. Подсветка колонок: https://t.me/htmlshit/2396
2. Анимация в стиле MacOS Dock: https://t.me/htmlshit/1873 с полным разбором: https://t.me/htmlshit/1876
3. Весёлая анимация букв: https://t.me/htmlshit/1634
4. Когда вышел Chrome 105, разработчики разродились большой статёй: https://t.me/htmlshit/1391
5. Джим Нильсен тоже не отставал: https://t.me/htmlshit/1313
6. Зум на определённых частях изображения: https://t.me/htmlshit/1206
7. Ну и шикарнейший тред от Веса Боса в Твиттере о десяти применениях новинки: https://twitter.com/wesbos/status/1737148340322652632

В общем, не переключайтесь. Будет ещё :)

#css #has #future

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

Я вообще сел другой пост писать, но наткнулся на эти карточки в моей твиттер-ленте.

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://poke-holo.simey.me/

Прекрасно выглядит даже на мобильных устройствах.

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient #бородач

#заметка дня

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

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

Речь пойдёт об одной штуке, над которой мы в 2009 году чуть-чуть заморочились, но сейчас бы сделали иначе: "Телевизор".

Под каждым сообщением была иконка телевизора, по тогдашней Web 2.0-моде размером 16x16 пикселей, нажав на которую можно было подписаться на обновления к посту.

Поскольку в 2009 году куча людей всё ещё сидели на низкоскоростных соединениях, да и сервера наши были так себе (особенно с Drupal-то), мы решили отобразить состояние загрузки анимацией поиска каналов, на видео.

Я вам даже демо с React Query приготовил: https://3md85t.csb.app/

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

Привет, Тима! Если не подписан — я тебе ссылку пришлю :)

Теперь о том, почему в 2024 году это делать ну, как минимум, странно.

Потому что гораздо разумнее опираться на подход Optimistic Updates.

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

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

В нашем случае — сразу включить "телевизор", а уж если что, сообщить об ошибке.

Да, в таком случае надо бы внимательнее отнестись к обработке нештатных ситуаций и дать возможность повторить операцию на тех же вводных. Для React Query есть отдельный гайд: https://tanstack.com/query/v5/docs/react/guides/optimistic-updates

Зато каков прирост качества UX!

Буду закругляться, котаны. И с Новым годом! Ну вот не подготовил я ничего более праздничного.

Не залипайте в телевизор в новогоднюю ночь :)

Увидимся в 2024.

#optimistic #updates

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

Теперь давайте перейдём к эффекту посложнее, на видео. Там подключен реакт, чтобы можно было добавлять карточки и управлять параметрами эффекта.

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var

#просьба дня

Дамы и господа, кто уже отошёл от новогодних праздников и у кого есть аккаунт на GitHub.

Наставьте реакций, пожалуйста, под этим багом в Telegram MacOS: https://github.com/overtake/TelegramSwift/issues/1056

Я дико устал переписывать посты по два раза из-за сбоев в форматировании :(