JavaScript *

Решил сделать на Twitch шоу, где нельзя смеяться, с ИИ-распознованием эмоций. Рассказываю, как оно устроено внутри и с какими проблемами столкнулся.

Одновременный просмотр видео с друзьями без делея. Интеграция чтения эмоций в прямом эфире. Парсинг видео и топа комментариев, которые присылают в личку. Оверлеи и влияние зрителей на игру.

Первые цифры. Буду рад фидбеку.

Мне нужна была утилита под macOS, которая берёт образ Super Audio CD и делает из него FLAC. Обычный путь «открыть ISO в ffmpeg» здесь не работает: внутри не PCM, а однобитный DSD, часто ещё сжатый в DST. В итоге получился Кедр. Окно на Electron, само преобразование делает локальный Python, альбом с машины никуда не уходит.

И сразу честно, как это писалось. Я не набирал проект руками файл за файлом. Это вайбкодинг в Cursor: я говорил, что должно получиться, смотрел результат и возвращал в чат то, что сломалось уже на настоящем диске. Модель хорошо собирает каркас и плохо угадывает, как себя ведёт Homebrew ffmpeg 9 на конкретном DSF. Ниже как раз про это. Без тех прогонов на своём Mac утилита бы так и осталась «ну вроде открывается».

В прошлой статье я показал cronsense, библиотеку, которая переводит расписание на русском или английском в cron: «по будням в 9:30» → 30 9 * * 1-5. Комментаторы устроили ей хабратестирование и нашли, чего она не умеет: «полвторого», «без пяти шестнадцать», «каждые полчаса», а ещё задачи, для которых cron не подходит вообще.

За несколько дней вышло семь версий. Теперь одна фраза превращается в cron, RRULE для календарей или таймер systemd, а праздники можно называть по имени. Для «последнего рабочего дня месяца» появилась вторая библиотека, prodcalendar: производственный календарь РФ, который сам обновляется в npm. Попутно сверка с rrule.js и systemd-analyze нашла баги, о которых я не знал.

Песочница

Почему архитектура важнее выбора стейт-менеджера в React

Когда я только начинал свой путь разработчика мне было интересно изучать новые технологии. Учил все подряд. Все знал. Но что лучше или хуже и уже тем более почему — сказать не мог. Именно об этом — как писать код правильно — я собираюсь сейчас рассказать. И буду это делать через призму выбора стейт-менеджера в React.

Всем привет! Меня зовут Даниил Николаев и я frontend-разработчик в компании "Исходный Код"

На каждом kickoff нового проекта всплывает один и тот же сценарий: один разработчик топит за утилиты Tailwind, второй отстаивает чистоту и надежность CSS Modules, третий по привычке тянет проверенный CSS-in-JS, а кто-то просто молча открывает .scss и выходит из созвона.

В этой статье мы опустим споры о «красивом синтаксисе» и разберем инженерную сторону вопроса: кто на самом деле платит за динамику — сборка или браузер клиента.

Заглянем под капот ключевым подходам в мире React (для уровня middle и middle+): разберем классические CSS Modules, ушедший в maintenance mode styled-components, Emotion, современный Tailwind v4 на движке Oxide и перспективный zero-runtime (Linaria, Vanilla Extract). Посмотрим, что реально происходит с CSSOM, reflow и рендером в браузере, а в конце — соберем практическую матрицу выбора без фанатизма и хайпа месяца.

Ого, да это же следующая статья цикла про Capacitor. В ней мы рассмотрим нюансы реализации микрофронтендов в Capacitor приложении,а также разбирем схему, в которой команды могут выпускать MFE независимо и не ломать нативную часть приложения.

👋 Привет! Меня зовут Александр, я работаю фронтенд-разработчиком в компании «МегаФон». Сегодня хочу поговорить о статическом анализе TypeScript-проектов за пределами привычной связки tsc и ESLint.

Помните Million Dollar Homepage? В 2005 году студент продал миллион пикселей по доллару за штуку и заработал миллион. Никакой пользы в этих пикселях не было, но люди платили за участие в мемчике и за место, которое видят другие.

Мне захотелось сделать что‑то похожее для разработчиков, только вместо денег — валюта, которую у нас и так все копят: звёзды на GitHub.

Так появился Star Throne — репозиторий‑игра. Ставишь ему звезду, и через минуту‑две GitHub Actions считает, сколько звёзд у тебя самого. Если ты сильнейший в своей лиге, твоя аватарка появляется на троне прямо в README. Сервера нет, базы данных нет, хостинга нет. Всё работает на GitHub.

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

Чтобы дать LLM доступ к своему коду, пишут инструменты (tools). Инструмент — это функция и всё, что модели нужно знать, чтобы её вызвать: имя, описание и схема аргументов.

Потом те же инструменты приходится писать ещё раз. Первая версия сделана на tool() из AI SDK. В проекте появляется MCP-сервер, и инструменты переписывают под registerTool. Соседняя команда использует Genkit, и те же инструменты пишут в третий раз, через defineTool. Функции остаются прежними, меняется только обёртка.

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

Мы делаем пет-проект «Чатограмма»: он считает статистику переписки прямо в браузере, файл с перепиской на сервер не уходит. Такое обещание проще всего проверить без чтения политик: включить авиарежим и посмотреть, посчитается ли. Для этого странице нужно ответить на, казалось бы, тривиальный вопрос: есть ли сейчас сеть? На iPhone ответ оказался неожиданным.

Я работаю над bffi‑rs, экспериментальным фреймворком для нативных биндингов Bun, написанным на Rust.

Проект появился из довольно практичной задачи. Я хотел сделать небольшое desktop‑приложение с нативным WebView, но при этом оставить Bun основным рантаймом.

В экосистеме уже есть решения для подобных приложений. Например, некоторые интеграции WebView для Bun используют Rust и napi-rs. В варианте Electrobun, который я рассматривал, для WebView используется Wry, а связка между Rust и JavaScript строится через napi-rs. Эти проекты решают реальные задачи, но у меня появился другой вопрос: что будет, если строить нативную часть приложения вокруг Bun, а не вокруг совместимости с Node.js?

Библиотека называется cronsense. Она переводит расписание, записанное обычными словами на русском или английском, в cron‑выражение и обратно. Рассказываю, как устроен разбор, о какие ловушки cron легко споткнуться и как тесты проверяют, что описание разбирается обратно в то же расписание.

10 браузерных API, заменяющих пакеты NPM и плагины jQuery: dialog, popover, переходы отображения (view transitions), structuredClone, groupBy и Temporal с заметками о поддержке.

Мы делаем пет‑проект «Чатограмма», который считает статистику переписки: кто пишет первым, кто быстрее отвечает, в какие часы вы на связи. С первого дня у него одно жёсткое правило: файл с перепиской не уходит на сервер. Всё считается в браузере пользователя, а сервер не видит ни одного сообщения — не потому, что обещает не смотреть, а потому, что сообщения до него физически не доходят.

Потом понадобилась подарочная книга: PDF формата A5, где самые яркие моменты переписки собраны по главам — с чего всё началось, первое «мы с тобой», лучшие моменты каждого года, общий словарь, квиз «Кто это написал?». Плюс вариант для печати дома брошюрой: A4, сложить пополам, скрепить степлером.

И здесь правило «ничего на сервер» перестаёт быть бесплатным. Книгу обычно верстают на сервере: headless Chrome, LaTeX, что угодно с нормальными шрифтами и без ограничений по памяти. У нас всё это должно работать на телефоне, в том числе на iPhone, в том числе во встроенном браузере мессенджера. Ниже — как это устроено и на какие грабли мы наступили.

Я сделал бесплатную проверку сайтов на нарушения 152-ФЗ: вводишь адрес, получаешь список проблем. Первая версия умела ещё кое-что, чего я в неё не закладывал. Подставляешь чужой хост и порт, и по тексту ошибки видно, открыт порт или закрыт. Бесплатный сканер портов для всего интернета, причём запросы идут с адресов Cloudflare.

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

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

Причалы на обложке складываются в S-57, а в коде слева спрятаны две строки. Кто первый расшифрует, пишите в комментарии.

На миллионе синтетических записей в Node.js сжатый индекс обогнал простое пересечение массивов примерно в пять раз — на запросах «редкое + частое». Но перебор редких кандидатов на Uint32Array оказался ещё вдвое быстрее. А поток postings на 9 МиБ удерживал в памяти весь файл на 137 МиБ из-за одной строки с subarray.

Бывает так: открываете менеджер cookies, удаляете всё для сайта, перезагружаете страницу — а сайт вас по-прежнему узнаёт. Одна из причин в том, что современные браузеры хранят часть cookies в отдельных «разделах», и старые расширения их просто не видят.

Я разбирался с этим, когда переписывал Cookie Quick Manager — популярный менеджер cookies для Firefox (около 45 тысяч пользователей на AMO), который не обновлялся с 2019 года. Результат — CookieTin, открытое расширение для Firefox, Chrome и Edge (GitHub). В статье — что такое partitioned cookies, как их достать через WebExtensions API и на какие грабли я наступил по дороге.