JavaScript *

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

Потом понадобилась подарочная книга: 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 и на какие грабли я наступил по дороге.

Я учу английский по сериалам. Смотрю с английскими субтитрами, и каждое незнакомое слово — это пауза, alt‑tab, переводчик, обратно. К десятой паузе за серию хочется просто включить русские сабы и сдаться.

Есть Language Reactor и похожие сервисы, но у них жёсткий список площадок: Netflix, YouTube — и всё. Каждый стриминг рисует субтитры своим способом, и под каждый нужен отдельный парсер. А я смотрю где придётся.

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

Было популярное китайское расширение Dadda Translate (达达划词翻译): выделяешь слово, получаешь перевод, сохраняешь в словарик, и слово потом всплывает уведомлением, пока не запомнится. Оно перестало работать: API Sogou и Shanbay, на которых держался перевод, изменились или исчезли. К тому же оно было только для Chrome и только для пары английский → китайский.

Я переписал его с нуля. Получился WordToast для Firefox, Chrome и Edge (GitHub). Он переводит на язык браузера, умеет работать полностью на устройстве и объяснять слово в контексте через ваш собственный ИИ-ключ. В статье расскажу о трёх технических частях:

Обсудим: composable, sharedComposable, pinia. Попробуем понять: а нужно ли вообще управлять состоянием? что значит управлять? кто должен управлять? и Какие существуют подводные камни в управлении состоянием. Методы и идеи их преодоления. Готовые библиотеки или примеры кода для использования.

Контекст статьи — PWA, в других контекстах тоже будет работать, но это не точно.

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

Представьте парк аттракционов, фуд-корт на фестивале, корпоративную столовую или сеть автомоек. Что их объединяет? Всем им нужна своя закрытая платёжная система или внутренняя программа лояльности (клубные карты).

Обычно внедрение такой системы — это боль. Нужно покупать дорогие терминалы, нанимать интеграторов и пилить самописный софт. А что делать, если система нужна «на один раз» (для трёхдневного фестиваля) или у малого бизнеса просто нет бюджета?

Меня зовут Никита, и я решил закрыть эту боль, заодно прокачав своё портфолио. Я разработал легковесную, open-source альтернативу закрытым платёжкам, которая работает прямо в браузере, не требует скачивания приложений и сложного железа.

Под капотом — классический стек React + Node.js и капелька технологии в виде WebNFC.

Движок знает ответ, но говорит числами. Модель говорит словами, но врет. Рассказываю, как проверяю каждый ход из ответа LLM кодом и почему просьба в промпте тут не работает.

YApi — платформа документации API, мок-сервера и тестов с 27 тысячами звёзд — не обновлялась с 2022 года. На новом Node.js у неё ломаются токены, клиент не собирается, нужное ей расширение браузера больше не работает в Chrome, а мок-скрипты позволяют выполнить код на сервере.

Я продолжил проект и по дороге нашёл, что без настройки passsalt токены проектов шифруются общеизвестным ключом — участник проекта может выдать себя за другого пользователя. В статье — как это исправлено без поломки старых токенов, песочница для скриптов на isolated-vm, своё расширение на Manifest V3 и тест обновления на настоящей базе YApi.

Телефон лежит на столе или в другой руке. Сбоку от него в воздухе ладонь. Двигаешь ладонью — корабль на экране поднимается и опускается. Экрана не касаешься. Камера не нужна: телефон пищит ультразвуком и слушает эхо своим микрофоном.

Играть: sonaroids.app (веб-приложение на iPhone; для Android есть .apk — ссылка на главном экране игры). Код: github.com/neokrasav4ik/sonaroids, MIT.

UPD. Заголовок устарел, и это хорошая новость: на Mi 9 Lite, середнячке 2019 года, играется так же, как на iPhone 16. Помогли широкий зонд (управление примерно вдвое чище) и приложение для Android со своим звуком, правильной громкостью и выбором микрофона. Новые разделы статьи — «Широкий зонд» и «Android: приложение вместо браузера».

Бывает, что блокировщик рекламы не справляется: всплывающее окно подписки, баннер «мы используем cookies», чат-виджет в углу, липкая шапка на пол-экрана. Для этого было маленькое расширение ekill: жмёшь кнопку, наводишь на элемент, кликаешь — элемент исчез. Оно не обновлялось с 2019 года и перестало работать в Chrome, когда Google отключил Manifest V2.

Я переписал его под Manifest V3 для Firefox, Chrome и Edge. Получился SkullClick (GitHub). Задача кажется тривиальной, но у неё неожиданно много граней:

Всем привет! Меня зовут Павел Барсуков, я frontend-разработчик в компании «Программный Продукт».

Основной мой стек – Vue, Nuxt и все рядом лежащее. Angular до недавнего времени я видел в основном в курсах на Youtube, пару раз на фрилансе, где особо с ним не взаимодействовал, и в мемах про исключительность Angular разработчиков и очень частые обновления версий. И тем не менее, мне была поставлена задача мигрировать проект со старой версии на более новую, и я взялся за это.

Мы делаем сервис с несколькими языковыми моделями в одном чате. Однажды модель начала отвечать списком из ста пунктов и оборвалась на середине слова, без ошибок и предупреждений. Рассказываю, почему так бывает, как мы дописываем ответ по finish_reason и почему склеить куски без артефактов оказалось сложнее, чем кажется: три ловушки и функция, которая их обходит.

Мне давно нравится идея хранить заметки обычными Markdown-файлами в своём репозитории на GitHub. Файлы остаются твоими, их можно открыть на github.com или в любом редакторе, а история изменений достаётся даром: это просто коммиты.

Был проект BatNoter, который делал ровно это, но ему нужен был собственный сервер для входа через GitHub. В конце 2022 года сервер перестал отвечать, и приложение умерло.

Я переписал его так, чтобы сервер был не нужен вовсе. Получился Notewing: браузер сам ходит в GitHub API, изменения копятся офлайн и отправляются одним коммитом, а конфликтующие правки не теряются. В статье расскажу, как устроена синхронизация через Git Data API, где были подводные камни и как всё это тестировать, не трогая настоящий GitHub.

В большинстве SPA-авторизация до сих пор строится вокруг JWT, localStorage и заголовка Authorization. Такой подход прост и удобен, но он заставляет клиентское приложение самостоятельно управлять credential и пользовательской сессией.

В этой статье разберём, что меняется при переходе на HttpOnly Cookie и серверные сессии: как браузер хранит и отправляет Cookie, зачем нужны HttpOnly, Secure, SameSite, Domain и Path, и почему вместе с Cookie приходится по-новому смотреть на CSRF и CORS.

Отдельно разберём разницу между JWT и session ID внутри Cookie, а в практической части посмотрим, как такая архитектура меняет React-приложение с Axios и MobX.

Всем привет, это третья часть, в которой пилю калькулятор плитки - tilely.ru. Получился довольно крупный патч, в основном вокруг 3D-режима, и там оказалось прилично багов. Многое пришлось переделывать из того, что сначала казалось логичным, а на практике оказалось вообще неудобным.

Перед самим 3D - то, что допилил ещё раньше в очереди. Теперь можно загружать фото плитки, чтобы не смотреть на однотипные прямоугольники одного цвета. Есть кнопка «применить ко всем комнатам». Если у вас, скажем, санузел и кухня одной плиткой идут, не надо грузить фото дважды. Так же теперь можно выбирать цвет швов, а то они были всегда одного цвета, и картинка порой сливалась.

Есть Vue DevTools с галкой «Highlight updates». Есть react-scan в соседней экосистеме. Оба показывают одно и то же: вот этот компонент перерисовался.

Проблема в том, что знание «перерисовался» само по себе бесполезно. Ты и так видишь, что страница дёргается. Вопрос всегда другой: что именно изменилось. Какой проп, какой реф, какое поле стора. Без этого ты сидишь и комментируешь куски шаблона, пока не найдёшь виновника методом половинного деления.

В React иначе и нельзя: реактивность там на уровне «перерисовался компонент», причину приходится реконструировать диффом пропсов. А во Vue реактивность точечная — фреймворк знает, какая именно зависимость дёрнула рендер.

И он её отдаёт.