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

Вот как ты, котан, ищешь недавний баг в проекте?

Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?

А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?

Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):

$ git bisect start
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2

После чего bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.

Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине.

Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.

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

#git #bisect #бородач

#codepen дня

Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.

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

Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)

В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa

И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.

Короче, моё демо теперь тоже не за горами :)

#css #scroll #animation

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Демо: https://codepen.io/stoumann/pen/ZEjjyEp

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music #бородач

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