Frontender's notes [ru]

Шрифт — это не просто буквы

Александр, который ведёт канал «Shulepov Code», пообщался с Александрой Корольковой. Она — арт-директор в Paratype, написала книгу «Живая типографика», запилила YouTube-канал «Шрифтовой видеоблог» и приложила руку к PT Sans, PT Serif и другим шрифтовым системам.

Тема разговора — как профессия прошла путь от металлических литер до веб-шрифтов, как вообще устроена работа шрифтовой студии, что там с лицензиями и ценами, зачем нужна кириллица, какие инструменты в ходу и что такое заказные проекты. И отдельным блоком: почему логотип Coca-Cola — это не шрифт, с какой радости одной гарнитуре нужно сотни знаков и почему качественный веб-шрифт надо гонять на плохом мониторе.

Дошли и до ИИ: что конкретно нейросети уже отжимают у шрифтового дизайнера. А ещё — внятный ответ на вопрос, сколько шрифтов реально нужно одному сайту.

Читать далее

👉 Frontender's notes

Саппорт-агент на LLM, который не забудет сгонять за заказом

Один товарищ собрал агента поддержки на LLM и выкатил разбор. Первая версия — обычный агентский цикл: пусть, мол, модель сама соображает, когда дёргать тул. Итог предсказуемый: в каждом третьем ходу она за заказом не шла, а тупо выдумывала ему статус.

В харнессе всё иначе — модель тут вообще ничего не решает. За данными топает код, а модель зовут всего дважды: разобраться, что за вопрос, и накатать ответ. Агентский цикл поднимается за вечер и теряет тул в 1 ходу из 24. Конвейер для прода не теряет ни разу, зато роутер и сценарии под него человек пишет руками. Тысяча диалогов на Qwen — полбакса, на Opus — тридцатка баксов.

Читать далее

👉 Frontender's notes

tinyjs: десктопные приложения на JavaScript, которые весят меньше 10 МБ

В свежем выпуске JavaScript Weekly #803 засветился проект tinyjs от Tarwin Stroh-Spijer. Бэкенд крутится на txiki.js и даёт полный доступ к системе, FFI в комплекте. Отрисовка идёт через нативный webview. Сборки под macOS, Linux и Windows выходят смехотворно маленькими. Отдельно подчёркивают: подпись и нотаризацию готового приложения тоже не превратили в квест.

Конкуренты, ясное дело, никуда не испарились. Electrobun умеет больше — несколько окон, GPU — но за это платишь более жирным TypeScript-рантаймом. Правда, главный процесс там можно написать на Zig, Rust, Go или Odin. Perry компилит TypeScript в нативный AOT-код и рендерит виджеты AppKit, Win32 и GTK4. Electron и экспериментальный Deno Desktop — штуки мощные, но их исполняемые файлы обычно в разы толще. А Neutralinojs может оказаться даже меньше tinyjs — вот только универсального привилегированного JavaScript-бэкенда там нет, и так задумано.

👉 Frontender's notes

Переведённые сабы в Chrome-расширении: звук вкладки на MV3 и один поток вместо двух сервисов

Расширение тащит субтитры с переводом поверх созвона прямо в браузере. Бот в звонок при этом не лезет.

Дальше автор раскладывает три места, где времени утекло больше всего: захват звука вкладки в Manifest V3; переезд с пары сервисов на единый поток, где и транскрибация, и перевод; и косяк в счётчике минут — время списывалось, пока в эфире стояла тишина.

Читать разбор на Habr

👉 Frontender's notes

React 19.3 подъехал в npm.

View Transitions и Fragment Refs в прошлом году числились экспериментальными API. Теперь им выписали стабильный статус — и всё это уже в 19.3.

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

Читать далее

👉 Frontender's notes

Как вообще родилась npm-библиотека morphing-scroll

Автор тут расписывает свою npm-штуку morphing-scroll. На момент написания статьи это его второй проект в npm — и самый замороченный. В код он при этом не полез: весь материал не про реализацию, а про то, как библиотека появилась и что автора на это толкнуло.

Читать далее: Habr

👉 Frontender's notes

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

Qwen3.8-LiveTranslate — это про синхронный перевод на лету. Держит 60 языков, различает нескольких собеседников и в переводе сохраняет их настоящие голоса. Средняя задержка просела с 2,8 до 2,3 секунды.

Qwen-Image-2.1 — свежая облегчённая модель для генерации картинок, и она обходит Nano Banana 2.0. Рисует нативно в 2K, умеет прозрачный фон, тянет сразу 10 референсов и правит точечно те области, что ты отметил. Уже на HF.

👉 Frontender's notes

Похоже, у Jev нарисовался открытый локальный соперник — Laya

Laya — это открытая локальная модель для принятия решений, 421 млн параметров. Заточена под структурные задачки: быстрое да/нет, оценка, выбор из вариантов. Памяти жрёт меньше 1 ГБ, лежит бесплатно на Hugging Face и заводится на ноуте, а то и на телефоне. Код — на GitHub.

Дальше — тест. Laya выставили против облачного Jev: обе гоняли одну и ту же змейку, с одинаковым форматом решений, 30 секунд. У Laya — счёт 46, длина 52, 86,5 решений в секунду, P50 около 9 мс. У Jev — счёт 1, длина 7, 3,2 решения в секунду, а весь цикл запроса к API — 317 мс. На M5 Pro медиана получилась 15,3 мс у локальной Laya против 298,1 мс у облачного Jev — в этом тесте разница почти 20-кратная. Вся соль в том, что Laya решает на месте, а Jev на каждом шаге виснет и дожидается ответа от облачного API.

Но есть и два ограничения, и о них говорят в лоб: в контекст влезает всего 512–1024 токена, так что часть задач туда просто не впихнуть; а вот обобщать без доп. тюнинга Laya будет похуже, чем Jev.

👉 Frontender's notes

Четверо в одной транзакции: кейс-батлы, PgBouncer под Prisma и реплика, которая отдаёт пустой инвентарь

Оба прошлых текста про сайт с кейсами CS2 автор добивал перечислением того, чего там нет: платежей, депозита шмоток, кейс-баттлов, рефералки, KYC. Теперь этот список можно вычеркнуть целиком. И почти вся жесть из него ужалась до одного вопроса: что будет, если несколько человек разом начнут двигать одни и те же деньги.

В разборе: батл на четверых внутри одной транзакции, порядок блокировок, который не даёт словить дедлок, PgBouncer с Prisma и правило чтения с реплики, которое типом не опишешь.

Читать далее

👉 Frontender's notes

Diablo II, стратегии про Рим и Prince of Persia: чему фронтенду не стыдно поучиться у геймдева

В Diablo II вся математика по скиллам лежит в простых текстовых файлах. Захотел покрутить баланс — пересобирать игру не надо, открыл файл и правь. В Prince of Persia 1989 года персонаж живёт по состояниям и переходам между ними. А в градостроительных стратегиях сборщик налогов сам решает, что делать дальше, просто по набору правил. Автор напоминает: геймдев уже закрыл кучу задач, над которыми фронтенд до сих пор чешет репу.

В статье разбирают, какие инженерные приёмы из игр реально утащить в веб и что ты с этого получишь на практике. Там про контракты и моки, конечные автоматы, событийную модель, pattern matching и деревья поведения.

Читать далее

👉 Frontender's notes

Уже 5 лет я делаю библиотеки на профессиональном уровне

Семь лет назад в npm улетела его первая либа — custom-border-mixin. Ради неё человек выпал из реальности на целую неделю: просто чтобы в своё удовольствие накатать SCSS-миксин.

Любопытно, что там вообще может быть весёлого, в этом SCSS? Гляньте на хелпер. Или всё-таки поменял?

Читать на Habr

👉 Frontender's notes

Telegram Serverless: бота теперь можно крутить вообще без собственного сервера

В BotFather всплыло сообщение про ранний доступ к Telegram Serverless. Смысл такой: код бота гоняется на инфраструктуре самого Telegram — отдельный VPS не нужен, Docker с nginx тоже мимо, да и внешняя база данных не обязательна.

Автор покопался и разобрался, что конкретно они там сделали, как выглядит разработка и реально ли теперь собрать Telegram-бота, у которого своего сервера нет в принципе. Оговорка: доступ пока early access, ограничений хватает, а привычный Python + aiogram туда по-быстрому не перетащишь.

Читать далее

👉 Frontender's notes

Форма, которая слишком много на себе тащит: как правила СХД уложить в состояние UI

В блоге компании Aerodisk на Habr вышла история про разработку навороченной формы для систем хранения данных. Авторы показывают: правила предметной области надо класть в состояние интерфейса, а не распихивать по обработчикам.

Главная боль, о которой там речь: сценариев работы три, а интерфейс под них один. Команда делится опытом, как в таком раскладе не развести дубли в состоянии и не устроить содом в обработчиках.

Зайдёт тем, кто проектирует большие формы и ломает голову, где вообще должны жить бизнес-правила.

Читать на Habr

👉 Frontender's notes

Юзер тапнул — а в ответ тишина: как не профукать его действие и не наплодить дублей

Человек жмёт кнопку, сеть отваливается — и браузер понятия не имеет, добрался ли запрос до сервера. Дёрнешь повторно — рискуешь схлопотать дубль. Не дёрнешь — профукаешь само действие.

В статье раскопана схема, которая закрывает оба этих геморроя: API без toggle, ключ идемпотентности в PostgreSQL, очередь на IndexedDB, Service Worker и проверка офлайна в Playwright. Автор сразу оговаривается: это не полноценный offline-first, а лишь щит для действий в момент, когда связь рвётся.

Разгрести повторы

👉 Frontender's notes

[Перевод] Протез для силы воли или харнесс для думскроллинга

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

Дальше он вспомнил свою же статью про харнесс и подход Atomic Habits к вредным привычкам — в том числе банальное «убрать с глаз долой» — и решил собрать себе такую же структурную штуку. Ей стал Curfew: расширение для браузера, которое следит за дневными лимитами на «вредные» сайты и режет их.

Читать далее

👉 Frontender's notes

Next.js, внешний API, Zod, нормализация и controlled fallback

Чужой API живёт по своим правилам: имена полей, вложенность, картинки, цены, пагинация — всё это добро принадлежит провайдеру. А UI у тебя крутится вокруг другой модели. И стоит компоненту полезть напрямую в event._embedded.venues[0].city.name — как структура внешнего ответа расползается по всему интерфейсу. Провайдер дёрнул API — и привет: карточки, detail page, search, metadata и тесты дружно поехали.

В App Router внешний запрос можно унести на сервер: Server Components спокойно работают с fetch, серверный код в клиентский bundle не протекает, а API key остаётся вне браузера. Server-side data fetching для App Router описан в документации Next.js.

В учебном проекте EventMap события из внешнего источника ходят не напрямую, а через server API слой.

Читать далее

👉 Frontender's notes