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

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

Зато сейчас я принёс действительно пушечную штуку: React Internals Explorer.

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

Очень рекомендую посмотреть видео от автора с объяснением или хотя бы почитать пост в его блоге.

Видео прикреплено к этому посту, но если предпочитаете ютуб — вот https://www.youtube.com/watch?v=qIlfTZxb8_0

Ну и ссылка на сам инструмент: https://jser.pro/ddir/rie

Да, у нас уже были попытки реализации подобного, например от Алекса Сидоренко: https://yangx.top/htmlshit/1970

Но представленный инструмент намного глубже погружается в проблему. Заодно, уже сейчас можно посмотреть, как по-разному React 18 и 19 рендерят компоненты.

Не забудьте нажать на кнопку Snippets, ага.

#react #tool #explorer

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

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

Есть проекты, которые написаны под Node 18 и не заработают ни на чём ниже. Есть очень старые проекты (да), которые дай бог под 10 заведутся, но всё ещё нужны.

Я уже молчу о вечнозелёных Bun, Deno... ну и так-то Go, Python и Rust тоже требуют собственную микроинфраструктуру на вашем компьютере, которая может отличаться от версии к версии.

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

Если говорить только о Node.js, я долгое время использовал nvm (Node version manager): у меня был проект на Ember.js, который собирался только очень старой нодой, а смысла переводить его на что-то новее не было.

Но потом задачи расширились. На новом (текущем) месте работы бакенд проекта на GAS надо было собирать сначала 12 нодой, потом 16... и только сейчас смогли перевести на 18. А фронтенд того же проекта изначально можно было собирать хоть бета-версией. И всё в рамках одного репозитория. И задачи по всей компании схожие.

Потому мы все разом стали использовать Volta.

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

Потому, встречайте: Proto.

Прото — менеджер для множества сред разом: Node.js, Bun, Deno, Python, Rust, Go.

На мобиле их сайт выглядит максимально плохо.

- Установка/удаление сред (в Volta нельзя было удалить Node.js например)
- Атомарное конфигурирование инструментов (каждому свой конфиг)
- Развитая поддержка плагинов
- Активное развитие
- Поддержка WASM-модулей.

Ну и материнский проект — moon — крайне мощный тулчейн и менеджер монорепозиториев как для локальной разработки, так и для CI/CD.

Пробуем?

P. S. А кто пробовал https://asdf-vm.com/?

#tool #nvm #volta

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool #бородач

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

Тут недавно в комментариях проскочил вопрос, чем так удобна командная оболочка zsh (Z shell) и набор расширений к ней Oh My Zsh. Чем оно лучше bash и вообще — ну зачем?

Ну короткий ответ — Tab умнее :)

Длинный — плагинами! Я не буду распыляться сейчас вообще, просто покажу один из свежих: автодополнение по npm-скриптам! Поддерживаются npm, yarn и pnpm.

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

https://github.com/grigorii-zander/zsh-npm-scripts-autocomplete

Я сам только начинаю путь в zsh, но дефолтные настройки того же Oh My Zsh очень удобные.

#zsh #plugin #tool #linux #macos #wsl #бородач

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

На моей памяти было два веб-приложения, позволяющих в некой мере понять, как работает SVG:
раз и два.

Суть в том, что иногда недостаточно просто взять и нарисовать SVG в редакторе, хочется понять принцип отрисовки, позиционирования, заливки и контуринга.

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

Итак, вашему вниманию проект с говорящим названием svg.wtf от Амелии Ваттенберг.

Предоставляет всё то же наглядное понимание принципов работы SVG, от координат и кривых безье до фильтров. Можно сохранять снэпшоты, чтобы сравнивать состояния работы, есть простейшие скрипты для работы с кривыми (например, выстроить по сетке).

Думаю, надо попробовать заслать ей скрипт для переориентации кривых (из моего любимого editor.method.ac), это когда вместо трансформов кривые возвращаются к простым координатам.

В общем, больше редакторов богу редакторов!

#svg #tool #education

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://yangx.top/htmlshit/2516

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

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

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

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool #бородач

#cтатья дня

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

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

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

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

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

И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://yangx.top/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

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

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

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

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

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

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

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

#svg #tool #interactive

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://yangx.top/htmlshit/2516

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

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

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

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool #бородач

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

Как сделать текст поверх картинки читаемым?

Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.

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

Как подобрать цвет оверлея и прозрачность? Очень просто, воспользоваться вот этим инструментом: https://codepen.io/yaphi1/pen/oNbEqGV

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

#css #tool #a11y

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh

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

Когда я недавно вас спросил, какие бы вы посоветовали вопросы для собеседования, были, ожидаемо, предложения поспрашивать про Event Loop и microtask queue.

Я, честно, редко вижу людей, которые на подобные вопросы отвечают с лёгкостью. Но это не значит, что проблемы не существует и знать процесс не надо :)

Слишком много частиц не

К счастью, есть инструменты, которые помогают легче понять происходящее! И вот один из них буквально так и называется: Event Loop Explorer.

https://vault-developer.github.io/event-loop-explorer/

Кстати, там в примере как раз то задание, что так любят спрашивать на собеседованиях :)

Вообще, подобных инструментов уже столько, что можно собрать коллекцию...

#javascript #eventloop #tool

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

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

Как сконвертировать что угодно во что угодно?

Через https://transform.tools/, конечно!

SVG в JSX, CSS в TailwindCSS и обратно, Flow в TypeScript, JSON Schema в OpenAPI schema и так далее до бесконечности.

Конечно, если нужно делать это массово — не вопрос, стоит использовать специально подготовленные утилиты. Но, как минимум, их можно подсмотреть прямо в репозитории проекта: https://github.com/ritz078/transform

#tool

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

Очень уютная штука.

#git #sim #tool #бородач

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

React Compiler, говорите...

А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?

Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...

Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/

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

Знаешь JSX или Svelte — пишешь на всех :)

#framework #tool #бородач

#статья дня

Вот мало было нам хороших статей по SVG, нужно больше!

Джош Комо продолжает свою серию про SVG. Начав со статьи про базовые принципы, пришло время объяснить, как работает механизм формирования кривых, контуров, aka path: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/

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

Но Джош это Джош! Как всегда потрясающая любовь к деталям, интерактивные примеры и понятные объяснения по ходу.

Фишка его подхода в этот раз — пошаговый разбор алгоритма отрисовки кривых. Проигрывает его по кадрам, как будто вы очень медленный компьютер :)

Залипательно!

P. S. розыгрыш билета на конференцию от подлодки открыт до утра, если что.

#svg #path #tool