Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

135,57
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности
Формат публикации

Месть за голосовые: генерирую видео с печатающими руками прямо в браузере

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели6.2K

У меня есть друзья, которые присылают голосовые на три минуты. Содержание обычно умещается в одно предложение, но чтобы его достать, нужно прослушать «короче, слушай, тут такое дело…». Голосовое не пробежишь глазами, на созвоне его не включишь, а ночью рядом со спящим человеком тем более.

В какой-то момент я решил ответить им так же неудобно. Получился pleasejusttext.me: пишешь ответ текстом, а на выходе MP4, где мультяшные руки не спеша набирают его на телефоне. Меня заставили слушать, пусть теперь смотрят.

Как это устроено

Хэши и пароли в браузере: что умеет Web Crypto, где нужна своя реализация и какие грабли мы собрали

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели6.6K

Мы делаем сайт с набором небольших браузерных инструментов. Два из них, хэш-калькулятор и генератор паролей, работают целиком на клиенте: введённая строка никуда не отправляется, и это можно проверить на вкладке Network. Расскажу, как они устроены, какие решения оказались неочевидными и как мы нашли у себя ошибку в собственной оценке надёжности.

Статья без громких обещаний. В ней много кода, несколько цифр и одна неловкая находка.

Читать далее

WebSocket в лифте: соединение есть, но приложение не работает

Уровень сложностиСложный
Время на прочтение12 мин
Охват и читатели6.7K

Вы заходите в лифт. Интернет пропадает. WebSocket по-прежнему OPEN. Приложение уверено, что все хорошо. Вы спускаетесь вниз, выходите, старый WebSocket может быть по-прежнему OPEN. Добро пожаловать в мир распределенных систем.

Главная проблема: операционная система не обязана мгновенно сообщать приложению, что TCP-соединение перестало передавать данные.

Читать далее

Достаточно «Искры» одной…

Время на прочтение4 мин
Охват и читатели11K

Почему я начал делать эту штуку? От жадности и от лени.

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

Читать далее

NVM for Windows v2: переписан с нуля — Go в ядре и нативная дружба с Windows

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели9.2K

(Node Version Manager - инструмент, чтобы управлять разными версиями Node.js на одном компьютере: устанавливать их, переключаться между ними и избегать конфликтов между проектами)

Источник: статья автора проекта Corey Butler «Why We Rewrote NVM for Windows» (6 октября 2026) и официальная документация nvm-windows.

После более чем десяти лет жизни версии 1 проект NVM for Windows получил полностью переписанную вторую версию. Это не косметический апдейт: изменены язык и архитектура ядра, модель работы с node.exe, способ хранения настроек, схема дистрибуции и даже бизнес-модель проекта. Ниже — коротко о том, зачем это было сделано и что именно получили пользователи.

Читать далее

Как читать графики из панели performance devtools chrome

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели9.4K

При виде панели performance из devtools хрома у любого человека глаза начинают лезть на лоб. Пользуются ей далеко не все фронтенд разработчики, а умеют пользоваться очень немногие.

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

Читать далее

Как в ответы ИИ попасть медицинскому сайту с комплаенсом

Уровень сложностиПростой
Время на прочтение25 мин
Охват и читатели8.4K

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

Если помещать блок комплаенса в видимую часть страницы, то это неминуемо приведет к “отказам” - быстрому уходу посетителя с сайта без прохода вглубь. Всё-таки люди приходят на сайт не для того, чтобы выяснить номер лицензии и насладиться чтением закона. Им чаще всего нужна именно услуга: название, что лечим, цена врач, отзывы. Поэтому заказчики сайтов и лендингов часто соглашаются на компромиссное решение, которое предлагают им разработчики: размещать блок комплаенса в футере либо над футером, причем в формате PDF. Это приводит к тому, что ИИ-краулеры просто не видят блок комплаенса либо присваивают ему низкий приоритет для вывода в рекомендациях. Соответственно, в ответ ИИ не попадает та часть сайта, которая должна подтверждать опыт, легальный статус клиники и безопасность процедуры.

Но, как мне кажется, эту проблему несложно решить чисто технически: добавив в дизайн-макет javascript с кнопкой-баннером, которая при клике на ней открывает дополнительный блок комлаенса, закрытый до нажатия кнопки. Этот блок отлично видим и краулеру дата-центров ИИ, и инструментам мониторинга, который применяют регуляторы (Росздравнадзор, ФАС). Такой блок можно разместить в любой части лендинга или главной страницы сайта, даже в самом верху, в виде обычного HTML. В этом случае ему будет присвоен высокий приоритет. К тому же в верхнем блоке можно разместить и разметку медицинского учреждения с адресом, картой, лицензией и каталогом услуг (Shema.org, json).

Читать далее

Потоковая выгрузка из Postgres в CSV часть 2

Время на прочтение5 мин
Охват и читатели7.3K

Потоковая выгрузка из PostgreSQL в CSV: серверный курсор и COPY

В прошлый раз я разобрал самые такие три жизненных примера работы с выгрузками.

Наивный способ через память, постраничку через OFFSET/LIMIT и через keyset курсор. Но было бы несправедливо остановиться на этом и не протестировать другие оставшиеся варианты. Два способа, которые я хочу рассмотреть - это серверный курсор pg-query-stream и выгрузка напрямую из базы через COPY. В этой статье дальше будут примеры с кодом, но сам по себе код не информативен, самое главное - что я прогоню эти два новых варианта через тот же бенчмарк, чтобы сравнить нагрузку на память и время выполнения.

Читать далее

Node.js 26 стал LTS: пять мест, где переезд с 24 ломается, и как найти их заранее

Время на прочтение9 мин
Охват и читатели5.9K

28 октября Node.js 26 стал LTS. Обычно смена LTS проходит тихо, но в 26 окончательно удалили writeHeader() и внутренние модули stream*, подняли ABI нативных аддонов до 147, а официальные бинарники для Linux теперь требуют libatomic, которой нет в slim- и distroless-образах. Воспроизводим всё на 22, 24 и 26, ищем такие места в проекте и node_modules одним скриптом и чиним так, чтобы код одинаково работал на всех трёх версиях.

Читать далее

«Уязвимости нет, и мы её исправили»: первая неделя HTML-виджетов в Telegram

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели13K

Недавно я писал статью о том как работают HTML-виджеты Telegram. На следующий день после ее выхода исследователи показали, как через виджет запустить калькулятор на Android. Павел Дуров заявил, что проблемы нет, а сценарий уже исправлен. Разбираемся, что сломалось, какие нейросети помогли найти баги и в какие версии Telegram попали исправления.

Читать далее

Библиотека из npm похищала ключи криптокошельков ещё до запуска приложения

Уровень сложностиСредний
Время на прочтение2 мин
Охват и читатели6.4K

С 9 ноября CodeScoring относит версию 13.3.0 JavaScript-библиотеки @ethersphere/bee-js для распределённого хранилища Swarm к вредоносным. При установке зависимости её код загружал вредонос, который пытался похитить ключи криптокошельков.

Заражённый пакет вышел через штатный процесс публикации проекта. Под учётной записью выпуска bee-worker в официальный репозиторий внесли прямой коммит, а затем создали релиз, запустивший существующий workflow GitHub Actions. По данным Socket, сведения о сборке в npm указывали на официальный репозиторий и штатный процесс выпуска проекта. Вредонос к этому моменту уже находился в исходниках.

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

В комментариях к коду злоумышленники описали обращение к своему серверу как отправку аналитики. На деле скрипт получал оттуда JavaScript и сразу запускал его с правами пользователя, который устанавливал пакет. 

Полезная нагрузка искала в данных приложения Swarm Desktop зашифрованный ключ кошелька и файл конфигурации. Если в конфигурации был пароль от ключа, то кража двух файлов позволяла получить управление кошельком. Вредонос также пытался закрепиться в системе, чтобы сохранить доступ после завершения установки.

На Linux и macOS атака продолжалась установкой бэкдора для удалённого выполнения команд. Адрес командного сервера он читал из смарт-контракта Ethereum. Оператор мог сменить этот адрес одной транзакцией, не выпуская новую сборку вредоноса. Важно учитывать, что заражённая версия могла прийти и транзитивно. Диапазоны зависимостей нескольких инструментов Swarm допускали версию 13.3.0, поэтому проверять нужно фактически разрешённую версию в lock-файле. Одного поиска прямой зависимости в манифесте недостаточно.

Читать далее

Что расширение Chrome может узнать о сайте, а что нет: грабли Manifest V3

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели11K

Я написал расширение, которое показывает код ответа страницы на значке, а по нажатию: редиректы, время ответа, срок SSL-сертификата и домена. Задача выглядела простой, но половина пунктов упёрлась в ограничения Chrome. Сертификат расширению не отдают, хотя API для этого описан в документации. Срок домена в зоне .ru из браузера не узнать. Фоновый скрипт засыпает через 30 секунд. Рассказываю, что работает, что нет и чем я это заменил.

Что работает, а что нет

Как уместить генератор обложек, визиток и постеров в один HTML-файл: Canvas, миллиметры и никакого сервера

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели8.7K

Каждый раз после написания статьи я ещё полчаса возился с обложкой: открыть редактор, подобрать шрифт, выровнять заголовок, экспортировать. В какой-то момент я решил, что обложка — это функция от заголовка, и её должна рисовать программа. Так появился небольшой инструмент, который сначала делал только картинку 1200×630, а потом оброс визитками, открытками, закладками и постерами A4 с PDF для типографии.

В статье расскажу, как он устроен: один HTML-файл без сборки, отрисовка на Canvas, перевод миллиметров в пиксели для печати, раскладка нескольких визиток на лист с метками реза, перевод интерфейса на шесть языков без библиотек и офлайн-режим. Ссылка на сам инструмент — в конце.

Сразу оговорюсь: я из Кореи, русский текст подготовлен с помощью переводчика, а код я писал вместе с ИИ-ассистентом (Claude) — проектные решения, проверки и ошибки при этом мои. Буду рад поправкам и к коду, и к языку.

Читать далее

Ближайшие события

Как я ускорил загрузку графиков Vigo Pulse в 2 раза

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели6.9K

В Vigo Pulse на одном графике могут оказаться сотни линий, а ответ сервера — содержать тысячи повторяющихся ключей и временных меток. Я пересмотрел формат данных и на одном из больших запросов сократил сжатый ответ с 1 МБ до 500 КБ, а время до отрисовки графика — с 3 до 1,5 секунды при скорости 4 Мбит/с.

Расскажу, что дал переход на колоночный JSON, как он показал себя рядом с MessagePack и BSON и помогает ли смена формата, если уже включён gzip. А ещё — как изменил фильтры и обработку тяжёлых графиков, чтобы не загружать лишние данные.

Читать далее

Геймплей от всего сердца, или как я решил превратить Bluetooth-пульсометр в игровой контроллер прямо в браузере

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели7.4K

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

Что будет, если превратить Bluetooth-пульсометр в игровой контроллер прямо в браузере? Знакомьтесь с Pulse Maze, игрой, где вы управляете персонажем собственным сердцебиением.

Ознакомиться

Metadata Validator | GitHub Теперь хардкор. Хотя если вы DevOps-инженер, то следующее объяснение будет для вас как...

Охват и читатели8.7K

Metadata Validator | GitHub

Теперь хардкор. Хотя если вы DevOps-инженер, то следующее объяснение будет для вас как воздухом подышать.

Из докторской диссертации Ээлко Долстры (создателя Nix):

Читать дальше →

Как считать просмотры, если контент меняется прямо на экране

Уровень сложностиСредний
Время на прочтение16 мин
Охват и читатели7.5K

Привет, Хабр! Я Самсон Авакян, фронтенд-разработчик команды Т-Путешествий в Т-Банке. Расскажу, как мы собираем просмотры офферов для обучения ML-модели ценообразования, когда цена и условия в карточках меняются прямо на экране.

Делюсь решением на React и TypeScript с использованием Intersection Observer.

А еще моя статья — часть проекта «20 в 20», в котором мы рассказываем о жизни наших ИТ-хабов. Из моего выпуска вы узнаете о южных, ростовских традициях. 

Читать далее

Статус оплаты обновился, но скринридер об этом не сообщил

Время на прочтение3 мин
Охват и читатели7.2K

На странице появилась надпись «Оплата подтверждена», затем — ссылка на Telegram-канал. Но пользователь скринридера может не узнать об этих изменениях. Разберём, как сообщать о новом состоянии через role=“status”, не перемещать фокус и не обновлять текст при каждом одинаковом ответе сервера. В конце — порядок ручной проверки.

Читать далее

«Задача о трёх соседях», или динамические сайты на облачном хранилище

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели6.6K

Привет, хабровчане!

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

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

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

Попытка number one

В первую очередь, мы попытались использовать легендарный Мах для организации защищенной переписки. На бумаге - всё просто. Есть два клиента, которые даже не зарегистрированы в Махе. Оба получают токен бота и могут отправлять и получать сообщения. Далее происходит обмен ключами, клиент А шифрует и отправляет, клиент Б читает и расшифровывает.

Но сразу возникли две проблемы. Первая - токен бота должен быть защищён и не отдаваться клиентам. Его можно разместить на сервере, но ведь сервера из сети клиентов не пингуются?

Вторая проблема, которую мы конечно же спустили на случайность, ведь в безопасном мессенджере такого быть не может - на следующий день после регистрации бота у меня его угнали. Когда я в очередной раз зашел на него посмотреть - там стояла упоротая фотка и ссылка на тг для связи. С хаЦкером мы разумеется связались и он предлагал позаимствовать бота "для генерации ИИ картинок". Ну конечно.

Читать далее

В джунглях флоры: как складывалась архитектура фронтенда

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели6K

ФЛОРА — это цифровая платформа по управлению дилерским бизнесом со сложной бизнес‑логикой. Над ней работают 25+ продуктовых команд и несколько платформенных. Фронтенд системы состоит из более чем 65 микрофронтендов (далее МФ), и их количество постоянно увеличивается: регулярно появляются новые направления, функционал расширяется. Каждый МФ (или группа МФ) может иметь свой роутинг, стейт, набор sharing‑модулей и типов. Группы МФ объединяются в целые подсистемы со своим жизненным циклом и экосистемой. У каждого МФ свой релизный цикл: он деплоится независимо от других, без пересборки образа основного shell‑хоста (далее flora‑host). Ещё в ФЛОРА можно открывать несколько инстансов одного приложения — вкладки реализованы на уровне всей системы. В этой статье я расскажу об архитектурных решениях и о том, как мы живем в описанных выше условиях

Читать далее
1
23 ...