#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 #бородач

#такое дня

Интересно, а выдача буквального denylisted-сообщения — это баг Твиттера, или фича?

#cтатья дня

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

А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.

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

Да, интерактивность будет минимальная, но всем и всегда ли она нужна?

В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.

И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://t.iss.one/htmlshit/2538

А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/

Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.

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

В общем, будущее тут, хотя и такое себе пока.

P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.

#video #transparency #tool

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

Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.

А что копировать-то? Какой формат данных внутри Google Slides?

И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/

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

#tool #clipboard

#такое дня

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

Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».

Но, если вас всё же угораздило, давайте подумаем, что же делать.

Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.

Чуете, куда я веду? Конечно же к Markdown. И Git.

Markdown легко читать, легко писать, легко переносить. Легко вести учёт ревизий, ну просто потому что это всего лишь текст. И любая платформа совместной разработки давно его поддерживает, не GitHub-ом единым, что решает проблему синхронизации и переноса.

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

Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, iCloud, Google Drive, Dropbox — да что угодно, файлы же у вас.

Про стендаперов не шутка, вон Денис Чужой вовсю его использует.

Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.

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

Пользуемся, котаны.

#notion #note #obsidian #tool

#игра дня

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

Итак, встречайте: Guess CSS!

https://www.guess-css.app/

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

Делитесь результатами, котаны!

#css #game #quiz #бородач

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

Сегодня на повестке дня очередная дикая вкуснятина по SVG!

SSSVG: https://www.fffuel.co/sssvg/

Да, руководств по созданию и работе с SVG было много, но настолько подробного я ещё не приносил.

Что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее и так далее — есть всё.

Каждый пример интерактивен, легко ориентироваться.

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

#svg #tool #interactive

#фишка дня

Автор твита с картинкой выше буквально написал: «It's official. I don't understand URL.canParse 🫠»

Ну, давайте разбираться, что же тут не так. Или всё так?

И надо ли это вообще понимать?

Для начала, подумаем, зачем нам может понадобиться URL.canParse. А нужно это для случаев, когда отбросить токенизацию aka URL.parse и выполнение запроса дешевле и быстрее, чем упасть в ошибку или городить try-catch. Например, в работе с микросервисами, с БД.

Если внимательно оценить все случаи и глянуть на документацию, наблюдаются два паттерна:

1. Если есть порт, протокол не нужен
2. IP-адресам всегда нужен протокол

Ну, собственно, это и есть ответ на вопрос, как же работает canParse и особо больше понимать там нечего.

Другое дело, что URL.parse и URL.canParse в принципе как-то странно реализованы... Попробуйте в консоли сделать URL.parse("google.com:80").

Так что история ещё не закончена. Понять canParse — можно. А стоит ли применять — вопрос.

#url #parse #static #javascript

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

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

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

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

Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!

Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.

Большинство повторяет заученные когда-то команды и сочетания

sudo rm -rf /*, например

Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/

И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂

#console #shell #bash #бородач

Чтобы попасть в Meta нужно пройти сложное собеседование и уметь писать высокопроизводительный код.

Высокопроизводительный код би лайк:

#статья дня

Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.

Что оно делало?

- слушало лог сети, как список событий
- вычленяло нужные события вызовов функций Google AppsScript
- десериализовало ответ
- выводило на экран, с разными фильтрами (с тех пор я ненавижу MUI)

И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.

Но зато на работе награду получил

Ладно, давайте к делу.

Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.

Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)

Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.

#chrome #safari #extension

#ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач

#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка

#крик дня

Семантическое версионирование? А нахуя?

Видимо, так подумали авторы популярного GitHub-экшена upload-artifact, предназначенного чтобы результат какого-либо необходимого для деплоя процесса выгрузить дальше.

Что они сделали?

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

Вот: https://github.com/actions/upload-artifact/issues/602

Что это значит? Так-то намерения хорошие: не позволить выгрузить .env и условные .config.json, содержащие секреты. Чтобы эти самые секреты никуда не утекли.

Вот только ребята забыли, что благими намерениями выложена дорога в ад!

Это изменение предназначалось для версии 4, но они с какого-то перепугу решили выполнить его в 3 версии.

НА-ХЕ-РА?! Кому от этого хорошо? Зачем?

Если люди выгружают секреты куда-то случайно — не беда, перезагрузят!

Абсолютно нормально иметь sample-файлы .env.sample, .config.sample и так далее. Что мы и делали, обогащая эти файлы секретами.

Вот что ненормально — так это навязывать свою точку зрения пост-фактум. Ещё и в стабильной версии.

Просто уроды, слов нет. Certified scumbag engineering.

#github #подстава

#заметка дня

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

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview #js #focus #бородач

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

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

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

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

#css #ui #ux #safe #target #бородач

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

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

Потом всё стало немного сложнее.

Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.

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

Но что же делать, не ставить же скучные плейсхолдеры?

И тут нам поможет https://picsum.photos/

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

Как-то так: https://picsum.photos/id/237/200/300

Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300

А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur

Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.

Удобно!

P. S. есть вероятность, что сервис заблокирован для РФ. Найду что-нибудь похожее.

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

Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/

Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.