Будни разработчика

#статья дня

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

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

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

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

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

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

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

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

#фишка дня

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

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

И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в 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

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

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

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

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

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

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

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

#video #codec #ffmpeg #encode #decode

#статья дня

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

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

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

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

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

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

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

#svg #bezier

#такое дня

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

#статья дня

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

И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта 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

#день дня

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

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

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

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

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

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

https://css-doodle.com/

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

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

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

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

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

#статья дня

— Мне не нужна физика, я буду фронтендером!
— 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

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

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

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

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

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

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

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

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

https://www.hackfrontend.com

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

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

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

#новость дня

Как вам такое: взломать 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

#игра дня

Ну что, JavaScript никто из вас не знает, мы это выяснили не так давно. А что насчёт валидации адресов электропочты?

Вашему вниманию очередной квиз: https://e-mail.wtf/

Вооружайтесь RFC 3522 и вперёд!

Inb4: проверка на собачку и валидация письмом — единственный рабочий способ.

У меня — 13 / 21 🫠

#email #quiz

#codepen дня

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

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

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

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

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

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

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

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

Чем вы тестируете проекты и продукты? Наверняка, большинство из вас пишут или собираются писать веб-приложения и 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

#фишка дня

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

Итак, выделяете какой-то элемент на вкладке 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

#заметка дня

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

Недавно появилась интересная задача - отображать список вкладок редактора вне области скролла как в любом редакторе кода, например в IDEA.

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

И вроде бы все отлично, но как обычно "есть один нюанс"....и это Safari. Ссылка на активный баг.

Но не стоит расстраиваться, решение нашлось в виде полифилла (не идеального, но отличного).

Проверяйте доступности браузерного api перед использованием и помните - "нет нереализуемых задач, всё лишь вопрос мотивации и времени".

#safari #scroll #scrollend

#такое дня

Когда вам в очередной раз станет стыдно, что вы сделали какой-то костыль, вспомните, что бегущую строку в CSS ещё совсем недавно нельзя было сделать без дублирования элементов: https://t.me/htmlshit/3721

А если и это не помогает, вспомните, что где-то там есть компания Apple, которая не осилила сделать «бесконечный» (или хотя бы автовозвратный) список часов и минут в будильнике, поэтому продублировала 0-23 на часах (0-12 в AM/PM) и 0-59 на минутах много-много раз. Очень. Много. Раз.

Кого-то, впрочем, это только больше расстроит. Ведь и платят им больше.

#apple #ios #бред

#заметка дня

Эпопея с пультом на Flutter продолжается! И в этот раз мне захотелось реализовать трансляцию фото (ну и видео) на телевизор.

Да, в 2025 году есть Chromecast, MirrorLink и AirPlay. Но хоть MirrorLink моим телевизором 2018 года выпуска и поддерживается, основной мой телефон — iPhone, а в AirPlay телевизор не умеет.

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

Потому на помощь нам приходит технология двадцатилетней давности, которая до сих пор поддерживается везде — DLNA!

В 2003 году тогдашние гиганты индустрии объединились и создали Digital Living Network Alliance, описав соответствующие стандарты и протоколы. В духе индустрии, использовались основанные на XML протоколы обмена данными и уже расмотренный когда-то мной SSDP.

Как это всё работает?

Когда мы сканируем сеть по SSDP, устройства сообщают в ответ поддерживаемые протоколы, схемы работы порты. И одна из таких схем работы — /MediaRenderer/AVTransport/Control.

Ну и мы отправляем телевизору запрос:

POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#SetAVTransportURI"

<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
  <s:Body>
    <u:SetAVTransportURI xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
      <InstanceID>0</InstanceID>
      <CurrentURI>http://192.168.1.10:8000/picture.jpg</CurrentURI>
      <CurrentURIMetaData></CurrentURIMetaData>
    </u:SetAVTransportURI>
  </s:Body>
</s:Envelope>

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

А уже второй командой посылаем Play:

POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#Play"

<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
  <s:Body>
    <u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
      <InstanceID>0</InstanceID>
      <Speed>1</Speed>
    </u:Play>
  </s:Body>
</s:Envelope>

И всё, всё работает. Главное, чтобы телевизор понимал, что ему передали. Заодно ещё метадату можно накинуть.

Да, в 2017 году альянс распустили, но DLNA работает буквально везде, где нужно. Просто называть стали по разному: Samsung AllShare, LG SmartShare, Sony Video/Music/Photo. А так, телевизоры, NAS-ы, куча приложений для всех платформ... Это очень простой, хоть и избыточный, протокол.

Да и реализовать это было весьма просто и интересно.

Кстати, можете сами попробовать побаловаться, есть минимальная имплементация DLNA с названием nano-dlna: https://github.com/gabrielmagno/nano-dlna

А большего и не надо.

#flutter #dart #dlna

С полей сообщают, что добавление .diff к адресу пулл-реквеста делает то же самое, но в формате .diff, который чуть менее многословный, чем .patch!

А чем меньше символов — тем дешевле и быстрее обработка.

Вот бы всё можно было представить в таком виде...

P. S. На BitBucket тоже работает!