#фишка дня

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

Итак, выделяете какой-то элемент на вкладке Elements, потом идёте в консоль — и этот элемент становится доступен под алиасом $0!

Более того, в $0-$4 по порядку хранится история этих выделений! А в $_ — последнее вычисленное в консоли выражение.

Есть ещё $(selector) — это шортхенд для querySelector, косящий под jQuery.

А есть $$ — это querySelectorAll...

В общем, вот документация: https://developer.chrome.com/docs/devtools/console/utilities

Из очень удобных штук — шортхенд keys() для получения ключей объекта. И monitorEvents() — чтобы узнать обо всех слушателях переданного события без ковыряния в UI.

Да, документации и фишкам сто лет в обед, но я как-то туда не особо заглядывал. А стоило бы!

И да, для чистоты эксперимента: в Firefox тоже есть подобное, но сильно поменьше: https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html

$0 там есть, а $1 уже нет. keys() есть, а monitor() — нет. В общем, сойдёт.

#chrome #devtools

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

Чем вы тестируете проекты и продукты? Наверняка, большинство из вас пишут или собираются писать веб-приложения и E2E-тестирование построено на Playwright.

Если вы в компании постарее, там может быть Cypress, Selenium, WebDriverIO... Да их десятки.

Если вы как и я в Финляндии, возможно, ещё и Robot Framework.

Я, честно скажу, умею работать только с Playwright и немного с Robot Framework (ну вот были у нас воршкопы, что делать). Что как бы очевидно для веб-разработчика, JS он и в Африке JS.

Но понадобилось мне тут прикинуть, а что делать, когда вы пишете проект на React Native или Flutter под 2-3 платформы, включая веб, или вообще — пишете нативно под мобилы? Чем тестировать-то?

Даже мой пульт уже чуток больше, чем пара кнопок.

И тут я открыл для себя Maestro. Сравнительно новый (с 2022) года тулкит. Поддерживает все основные платформы: Android, iOS, Web Views и браузеры, React Native, Flutter.

Как видно на видео, все действия описываются в YAML! Очень лаконично и понятно, ты не тонешь в бесконечных await, не зарываешься в fixtures. Тестовая среда понимает, что всё, что происходит на экране, подвержено флейку, что способы взаимодействия пользователя с приложением различаются от устройства к устройству, что у платформ есть свои нюансы работы.

И всё это в опенсорс и прекрасно запускается локально!

А в дополнение к этому они ещё и свою IDE для тестировщиков пишут. Инфраструктура разрастается и это прекрасно.

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

#testing #maestro #ios #android

#codepen дня

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

Сегодня ваш шанс вспомнить то самое чувство!

Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)

Тут: https://codepen.io/donotfold/pen/ZYYYJRV

Работает в Chrome и Safari TP.

Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.

#css #scroll #animation #бородач

#новость дня

Как вам такое: взломать npm, получить доступ к пулу пакетов, которые скачивают по два миллиарда раз в неделю и всё ради чего? Ради призрачного шанса попасть в UI какой-нибудь крипто или NFT-биржи и украсть эфирчик-другой.

Звучит как плохая серия сериала Скорпион? А нет, это вот буквально вчера случилось. Да-да, я опоздал с новостью.

Итак, некто с помощью фишингового письма с требованием обновить 2FA-токены умудрился обмануть ментейнера нескольких пакетов для работы с командной строкой (chalk, например, чтобы эту самую строку красить. Очень полезно.) Джоша Джунона.

В такие моменты я понимаю, что рабочие тренинги по фишингу не настолько уж и тупые.

В выпущенные атакующими обновления пакетов был подставлен вредоносный код, выполняемый на системах пользователей, работающих с сайтами или приложениями, использующими скомпрометированные версии пакетов. Вредоносная вставка для браузеров осуществляла перехват трафика и активности Web API, прикрепляя свои обработчики к функциям fetch и XMLHttpRequest, а также вмешивалась в работу типовых интерфейсов криптокошельков для скрытой подмены реквизитов получателя при переводе. Подмена осуществлялась на уровне модификации значений в запросах и ответах, незаметно для пользователя (в интерфейсе пользователя показывались корректные реквизиты). Поддерживались форматы транзакций Ethereum, Bitcoin, Solana, Tron, Litecoin и Bitcoin Cash.

В общем, технические подробности и список пакетов есть тут: https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised

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

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

Впрочем, такое письмо может кого угодно застать врасплох, да.

#npm #security

Проект от подписчика!

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

Презентация? Выступили на митапе? Создали свой канал и хотите поделиться интересной статьёй — добро пожаловать!

Привет! Меня зовут Дастан, я фуллстак разработчик с 3.5 годами опыта работы и я делаю проект в соло.

Я делаю проект Hack Frontend - платформа для подготовки к собесам для фронтов.

Как это мне в голову пришло:
Осенью 2024 года, я помогал родной сестренке с поиском работы на позицию фронта. И вот тогда я столкнулся с небольшой проблемой:
При подготовке к собесам, нужно постоянно переходить из одного ресурса в другой, тратя на это кучу времени. По теории ты ищешь инфу а одном месте, по тех части(решение задач) в других. В СНГ пространстве не было единой платформы куда можно зайти и выйти уже оттуда полностью подготовленным к собесу.

Так вот, я понял что нужно как то решать эту проблему и принял решение разработать такую платформу.

На первое МВП по времени ушло примерно 20 дней. Использовал такой стек технологий:
Next, prisma, postgresql.
При разработке делал очень сильный упор на SEO оптимизацию.

После того как я разработал первое МВП, 26 января я задеплоил его и начал делиться им своим друзьям, знакомым, по разным чатикам в тг, в линкедин. Примерно за пару дней я набрал 100+ пользователей, и тут я понял, что нужно его развивать.

На текущий момент статистика такая:
- ежедневное посещение ~500-700 людей в день
- 1200+ зареганных пользователей
- 50-100 кликов в поисковиках

Ни разу не делал платной рекламы, только органический рост.

https://www.hackfrontend.com

#статья дня

— Мне не нужна физика, я буду фронтендером!
— First time?

Каждый, каждый раз когда какая-нибудь крупная корпорация выпускает своё очередное видение мира, мы все вокруг резко вспоминаем: «А ведь у нас это всё уже было! Просто очень плохо поддерживалось и никто не понимал, как с этим работать...»

Так и сейчас. Apple уже три месяца дорабатывает свой Liquid Glass дизайн (теперь он не настолько уж liquid и даже не настолько уж и glass, но кого это волнует, правда?). React Native-разработчики смеются над Flutter разработчиками и хоронят платформу, те в свою очередь выпускают пакеты поддержки нативных виджетов.

А веб-разработчики резко вспомнили, что помимо WebGL у нас в браузерах ещё со времён IE6 имеются фильтры, позволяющие достичь как минимум похожих эффектов. Но вот беда, это всё столько раз объявлялось deprecated, что людей, который понимают принципы их работы — довольно мало.

К счастью, некоторые из этих людей не ленятся писать интерактивные обучающие статьи! Как, например, вот эту: https://kube.io/blog/liquid-glass-css-svg/

Объяснение принципов работы displacement map фильтров в SVG, реализация некоторых виджетов из Liquid Glass — всё на месте. Ну и без физики не обошлось, конечно же.

Лютая рекомендация.

#css #svg #filter

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

Милота, за которой стоит самый настоящий матан! Интереснейшие мозаики (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw

Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!

https://css-doodle.com/

Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.

На его основе создан https://tabbied.com/

Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅

Вообще, весьма круто. Пару вечеров убить точно стоит.

#css #pattern #бородач

#день дня

Ааа, чуть не забыл! С Днём программиста, котаны!

256 день в году сегодня такой, да.

Удачных вам 'undefined' is not an object!

#статья дня

В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".

И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).

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

И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!

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

И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html

Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html

Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.

Всем st, котаны!

#opentype #font #features

#такое дня

12 сентября Cloudflare устроили себе эпичный автогол: https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/

В новой версии дашборда React-хук внезапно превратился в пулемёт: вместо одного вызова useEffect он триггерился десятки раз подряд. Причина до обидного банальна — в зависимостях лежал объект, который пересоздавался на каждом рендере.

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

И это ведь не какая-то загадочная бага в ядре Linux, а ошибка из разряда «прочитай первую статью про хуки». Её должны были отловить ещё на ревью.

Но видимо, ревью формальное, нагрузочных тестов не было вовсе, а сценарии перегруза и защиты от них решили «подразумеваются».

Рекомендую прочесть статью хотя бы ради того, чтобы узнать, что такое Thundering Herd :)

Особо смешно, что индустрия уже много лет живёт с готовыми решениями этих проблем. Есть react-query, SWR и куча других библиотек, которые умеют кешировать данные, контролировать повторные запросы, дебаунсить и ретраить без того, чтобы фронтенд превращался в DoS-атаку на свой же бэкенд. Но всё это дружно игнорируется, и в прод выкатываются костыли уровня «ну вроде работает».

В итоге — глобальная недоступность сервиса, вызванная элементарным skill issue. Ошибка, которую любой толковый джун заметил бы на месте, внезапно кладёт критичную часть инфраструктуры одной из крупнейших сетевых компаний в мире.

И нет, это не React виноват, дамы и господа, даже не начинайте.

Ирония в том, что чем больше индустрия пишет о «best practices» и «production-ready», тем чаще мы видим вот такие падения на ровном месте.

#react #useeffect #hook

#статья дня

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

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

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

Вот оно: https://habr.com/ru/companies/ispring/articles/946176/

Кто не знает, что такое кривые Безье — в статье объясняется, а ещё я давно приносил тренажёр и — опять же — статью: https://www.tgoop.com/htmlshit/3196

Статья стоит даже сохранения в виде PDF, чтобы перечитать спокойно при случае и попробовать реализовать самому. И, как обычно, оскорбительно мало комментариев :(

В общем, очень рекомендую. Без скидок, офигенно.

#svg #bezier

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

А вот бы запустить ffmpeg в браузере, да так, чтобы прямо на клиенте...

Если кто не знает, ffmpeg — это буквально столп современного стриминга и конвертации видео. На нём работает буквально всё, от Twitch до ваших любимых ботов «скачать видео с тиктока». И почти все плееры тоже. Даже VLC (с чем связан недавний скандал).

Ну, кстати, это вполне реально: есть порт ffmpeg для Webassembly. Со своими нюансами и весьма сложным API, но есть же.

Но на свете существует не один лишь только ffmpeg! Вот, например, Mediabunny: совсем свежий открытый проект, который реализует работу с видео и звуком прямо в браузере. Обладает весьма простыми API, поддерживает прозрачную работу с разными источниками данных, как сеть, так и локальные файлы. Посмотрите только на примеры: https://mediabunny.dev/examples

Извлечь метаданные, сгенерировать раскадровку, пережать видеофайл, запустить стрим — всё возможно. А главное, написано всё на TypeScript, легко тришейкается и читается. Конечно, она частично стоит на плечах гигантов — WebCodecs API — но, как и всегда, объём проведённой работы над стандартным API огромен. Хороший DX из ниоткуда не возьмётся.

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

#video #codec #ffmpeg #encode #decode

#фишка дня

Сидишь, переписываешь старый проект на новую дизайн-систему и тут оно.

Модальное окно.

И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в Modal.Footer.

И всё бы ничего, но у тебя там форма. И не просто форма, а Redux Form-зависимая. И у неё свой внутренний обработчик submit. И снаружи его триггернуть — как-то многовато работы получается. И мешать в кучу компоненты модалки с компонентами формы неохота — всё протестировано давно, зачем трогать.

Что же делать? Очень просто! У button type="submit" имеется атрибут form, в котором — да, правильно — указывается id нужной формы. По аналогии с for у label. И клик по кнопке отправит форму, которая может быть расположена где угодно на странице.

<form id="test" onSubmit={() => null}>
  <input type="text" name="name">
</form>
<button type="submit" form="test">Submit</button>

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

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

#form

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

Чтобы этот этап перестал быть лотереей, Yandex Open Source запустил страницу Good First Issue. Там в реальном времени собираются «входные» задачи из разных GitHub-проектов Яндекса. Не нужно тратить часы на ручной поиск — свежие issues подтягиваются автоматически, а дальше дело за вами. В планах — фильтры по проектам, языкам и технологиям.

Такой формат упрощает старт и позволяет быстрее перейти от чтения документации к реальной практике. Для фронтенд-разработчиков хорошим примером может быть дизайн-система Gravity — понятная точка входа, где можно сразу попробовать свои силы. Но список не ограничивается UI: в последние годы компания выкладывает в открытый доступ и крупные датасеты (например, Yambda), и инструменты вроде профилировщика Perforator.

Все проекты лежат на GitHub, а значит, остаются привычные пулреквесты, обсуждения и, конечно же, те самые GitHub-страйки, которые никуда не денутся. А новая страница просто экономит время и делает первый шаг заметно проще.

#статья дня

Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.

Шум там наложить, модельку картой нормалей увешать...

Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.

Да-да, под ретро-игры!

Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/

Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.

Очень круто выглядит.

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

#молния дня

По данным Aikido, в экосистеме npm снова обнаружена очередная атака на цепочку поставок.

Речь идёт о новом черве, который действует автоматически и был создан той же группой, что стояла за инцидентом в августе. Кажется, они прочитали комментарии к предыдущему посту: https://www.tgoop.com/htmlshit/3761

Схема атаки выглядела так: в репозиторий загружались вредоносные версии пакетов. При установке они собирали информацию из окружения и CI — переменные process.env, ключи облачных сервисов и другие секреты.

Эти данные выгружались в GitHub в репозитории с названием «Shai-Hulud». Параллельно добавлялись workflow в GitHub Actions, которые отправляли содержимое на внешний сервер (через webhook) и дублировали его в логи.

Если у жертвы находились npm-токены, вредоносный код автоматически модифицировал другие пакеты этого же мейнтейнера: версия повышалась, в package.json добавлялся вызов скрипта, а вместе с пакетом публиковался payload. В результате заражение распространялось дальше без участия человека. Кроме того, в некоторых случаях приватные репозитории переводились в публичный режим, что увеличивало масштаб утечек.

Проверьте свои машины на наличие червя:

find . -type f -name "*.js" -exec sha256sum {} \; | grep "46faab8ab153fae6e80e7cca38eab363075bb524edd79e42269217a083628f09"

Кстати, на сей раз снова началось с утилитки про цвета, @ctrl/tinycolor.

Чтобы снизить риски, рекомендуется фиксировать версии зависимостей, не обновляться сразу на latest, использовать lock-файлы (все же знают, что для CI запуск установки надо проводить с ключом фриза?) и инструменты проверки.

Отдельно стоит отметить, что pnpm уже предпринял шаги для сокращения таких рисков: некоторое время назад был удалён механизм postinstall-скриптов, который часто использовался злоумышленниками. А недавно появилась опция minimumReleaseAge, позволяющая задерживать публикацию новых версий на сутки или дольше. Это даёт время на анализ и позволяет заметить подмену до того, как пакет попадёт в продакшен.

Но любим мы pnpm не только за это.

Почитайте обзорную и оригинальную новости. Там хорошо. Списки заражённых пакетов и их версий тоже имеются.

#npm #security #attack

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

Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим узнавать новое, не правда ли?

А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.

К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.

Уникальное название, согласен.

Ссылка: https://mysqlexplain.com/

Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.

Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain

То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!

Да и для обучения — бесценно.

#mysql #explain #laravel #бородач