#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

#статья дня

Мне очень нравится пытаться учить разработку под 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 #бородач

#зомби дня

Sanity написали про текущее состояние styled-components.

Библиотека официально с марта, если помните, в maintenance-режиме: новых фич ждать не стоит, и главная проблема — производительность. В React 18 она не использует useInsertionEffect, из-за чего вставка стилей тормозит рендер. И это ощутимо.

В Sanity сделали форк и оптимизировали вставку стилей, убрали лишние костыли и адаптировали всё под React 19. У Linear, после замены пакета на этот форк, рендер ускорился до 40% без переписывания компонентов.

Для React 18 они предлагают @sanity/styled-components, для React 19 — @sanity/css-in-js.

При этом авторы подчёркивают, что форк — временное решение. В ближайшей перспективе они советуют перестать писать новые компоненты на styled-components и выбрать альтернативу вроде vanilla-extract, Tailwind или Panda CSS, постепенно перенося стили.

Учитывая, что у нас в компании ещё огромное количество зависимостей от Styled Components (ведь все в целом ждали несколько иного развития событий), переход на форк, чтобы сгладить ситуацию во время апгрейда на React 18 и 19, кажется разумным. Тем более, что текущее состояние старых компонентов давно заморожено.

#css #react #sc

#новость дня

TikTok Sans — теперь не только фирменный шрифт соцсети, но и полноценный опенсорс.

Его изначально делали в Grilli Type: нужен был вариативный гротеск с хорошей читабельностью и поддержкой 460 языков. Потом в работу подключились Contrast Foundry и Type Network. В итоге получился масштабный проект: шрифт оптимизировали под интерфейсы, а также под особенности рендеринга на разных платформах и языках.

Да, кириллица поддерживается!

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

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

Google Fonts
GitHub

Для нас это значит, что можно использовать шрифт прямо в проектах без лицензионных заморочек.

#font #tiktok

#фишка дня

Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.

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

А вот фиг!

Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.

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

Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:

.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}

Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.

Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.

А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.

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

#фишка дня

Вот как вы думаете, что может преследовать разработчика веб-браузера во сне? Может, это разбор дерева DOM? А может, реализация всех новых атрибутов элементов?

Нет! Это поддержка легаси! Например, как вам такое сообщение в PR браузера Ladybird:

Atlassian login gets the base URL for its module scripts by throwing an error and pulling out the current script's URL from error.stack with regex.

Вы всё правильно поняли. Получение базового URL-адреса сборки ведётся путём выбрасывания исключения и поиска адреса в нём. Я такое делал на AppsScript чтобы получить стек, но прям в продакшене да чтобы для реального использования...

Пруф: https://github.com/LadybirdBrowser/ladybird/pull/5678

Дальше — больше. Не только разработчики Atlassian (Jira, Trello) используют подобное, тем же самым славится и любимый многими Parcel: https://github.com/parcel-bundler/parcel/pull/2534/files#diff-39112519f42223a8e331d0dac27d01f8a70db6fe3d515ad8016856931a6ccbda

Стало быть, фишкой дня объявляется:

function getBundleURL() {
  // Attempt to find the URL of the current script and use that as the base URL
  try {
    throw new Error();
  } catch (err) {
    var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
    if (matches) {
      return getBaseURL(matches[0]);
    }
  }

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

А подробнее о браузере Ladybird я рассказывал в нескольких постах. Например, тут: https://www.tgoop.com/htmlshit/2935

#js #hack