Рендерер Scratch имеет долгую историю связанных с SVG уязвимостей. Их источником становится то, что Scratch парсит сгенерированный пользователем (то есть контролируемый нападающими) контент в элемент <svg> и добавляет его в основной документ для выполнения различных операций (например, для измерения ограничивающего прямоугольника SVG более надёжным образом, чем viewbox или width/height).

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

Я считаю, что подход Scratch к санации SVG обречён на провал. Чтобы объяснить это, нам нужно совершить путешествие по истории санации SVG в Scratch и посмотреть, насколько хорошо он с этим справлялся.

Привет, Хабр! Меня зовут Даниил Подольский, я программист и архитектор, разрабатываю программное обеспечение и спецификации для создания ПО в YADRO. Вот уже девять месяцев я использую методологию Spec-Driven Development (SDD) в работе и управляю AI-агентами, которые пишут код. При этом я не считаю себя вайбкодером, потому что мой подход к работе более комплексный, чем просто «общение с AI».  

Это первая статья из цикла об оборудовании рабочего места SDD-кодера. Я расскажу о базовой настройке AI-агента Claude Code: что делать, если вы хотите оперативно и без перезагрузки переключать используемые модели и делать это для каждого проекта отдельно.

WebAssembly находится в разработке уже более 8 лет. Технология прошла долгий путь развития и недавно разработчики из Bytecode Alliance выкатили версию 3.0.

О WebAssembly уже много материалов, но сегодня нам важна сама суть. У нас есть возможность, воспользовавшись любым из доступных языков программирования, написать модуль с необходимой нам логикой и запустить в исполняемой среде браузера. Разработчики обещают: модули будут быстрее и безопаснее, чем JavaScript, а также созданные ранее технологии, наподобие asm.js.

На связи Борис Мещеряков, frontend-разработчик в ПСБ и чаще всего мне приходится работать с javascript-фреймворками - React, Angular и прочими. Узнав о WebAssembly, я какое-то время наблюдал за его развитием. Мне стало интересно, может ли новая технология помочь мне уже сейчас? Какие ее возможности существуют на данный момент и какие реальны в будущем?

Разберёмся вместе?

Большинство UI-тестов флакают, медленно работают и в итоге отключаются в CI. Показываю альтернативу — изоляционные UI-тесты без стендов, таймингов и боли.

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

Смотреть на то, как твой вылизанный бандл грузится рывками из-за отваливающихся узлов связи, больше нет сил. Все эти бесконечные битвы за 100/100 в Google PageSpeed, микро-оптимизации LCP и внедрение Edge-кэширования теряют смысл, когда пакеты просто не доходят до адресата.

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

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

Встречайте: Шакализатор сайтов 3000.

Intl API широко доступен (за исключением Intl.DurationFormat, который работает во всех современных браузерах, но существует недостаточно долго, чтобы считаться «широко доступным») и может удовлетворить почти все требования к форматированию непосредственно в браузере, без загрузки кода и без необходимости его парсинга. Он также учитывает языковые предпочтения пользователей, поэтому даты и числа можно форматировать так, как им удобно, без дополнительных усилий.

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

Помимо личных файлов, кино и музыки, хочется сохранить архив сайтов и веб-страниц для чтения в будущем — на месяцы или даже годы вперёд. Но в каком формате это лучше делать?

Об ООП кандидаты рассуждали уверенно — но в основном на концептуальном уровне, не вдаваясь в то, как именно ООП реализовано в JavaScript. С FP картина была другой: уверенности меньше, зато критика — конкретная и повторяющаяся: «иммутабельность дорогая по памяти», «рекурсия небезопасна из-за стека». Что характерно — эти аргументы почти всегда были сформулированы через опыт работы с JS, а не с Haskell, Clojure или Scala.

Это важная деталь. Любая парадигма существует на двух уровнях: концептуальном (идеальная модель) и имплементационном (как конкретный язык эту модель выражает). Судить о FP по JS — примерно то же самое, что судить об ООП по bash-скриптам с глобальными переменными.

Параллельно я регулярно слышал, что JS — функциональный язык. Аргументы варьировались от «там есть .map()» до рассуждений о чистых функциях и каррировании. Именно это и стало поводом для поста: я хочу объяснить, что я считаю функциональным языком — и почему JS таковым не является. Не перечислить отсутствующие фичи, а показать, почему их нет и что это значит в реальном рантайме.

Привет!

Это 13-й выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик».

🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео.

🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии.

🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус.

⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine.

⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun.

🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок.

🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем.

…и многое другое.

Всем привет
! Текст полностью написан человеком !

На днях вышла модель Qwen 3.6, весь реддит забит этой темой. И я рискнул проверить что она может

Оборудование на котором тестировал (Ноутбук Asus TUF AMD Ryzen + дискретная Nvidia rtx 4070 8GB):

Привет, All!

Как вам идея, отказаться от тегов вообще и делать WEB-проекты исключительно на классах? А еще, чтобы и клиентский, и серверный коды шли рядом, как в десктопном приложении.И чтобы с одними и теми же переменными можно было работать и в PHP, и в JavaScript.

«Зачем?» — сапросит кто‑то. Отвечу: чтобы можно было строить не DOM‑элементы, а объекты предметной области бизнес‑процессов, которые автоматизирует мое приложение. И чтобы не тратить время на разные async, promise, ajax и так далее, пусть за это отвечает фреймворк!

Я говорю примерно вот о таком построении WEB-приложения:

Вы уверены, что ваш бандлер вырезает неиспользуемый код? Я тоже был уверен — пока бандл Next.js проекта не оказался в два раза тяжелее, чем нужно. Прогнал одинаковый тест на webpack, rollup, vite, esbuild и Next.js — 5 из 7 ломаются на банальном barrel файле. Полез в исходники, нашёл основную причину — и она оказалась не там, где ожидал.

Сразу скажу: это перевод моей же статьи на Medium, но с небольшими дополнениями и более практичным разбором реализации.

Вот уже 18 лет статический анализатор кода PVS-Studio находится на рынке. За это время он обзавёлся поддержкой языков C, C++, C# и Java. Разумеется, останавливаться на этих языках мы не планируем, и в этой статье расскажем про разработку нового JavaScript/TypeScript анализатора, который выйдет уже совсем скоро.

Я узнал, что задача предварительной загрузки изображений с помощью JavaScript удивительно сложна. Существует несколько способов это сделать, и лучший из них зависит от требований конкретного приложения.

Привет! Меня зовут Егор Молчанов, я разработчик в компании Домклик.

В прошлой статье мы познакомились с новыми функциями input(), output() и model(), которые закладывают фундамент для будущего Angular без Zone.js. Сегодня мы поговорим о том, как эти изменения дошли до самой, пожалуй, наболевшей темы в любом приложении — работы с формами.

В Angular v21 появился новый, экспериментальный способ управления формами — Signal Forms. Он не отменяет старые добрые Reactive Forms, но предлагает совершенно иной подход, основанный на сигналах. Давайте разберёмся, как работали формы раньше, как они будут работать с Signal Forms, и что это нам даёт.

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

Обзор на браузерные API, которые стали Widely available в марте 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем.

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

Недавно Apple подтвердила стратегическое партнерство с Google для интеграции ИИ Gemini в свои устройства.  Сегодня мы их опередим и поднимем свою LLM в Android-смартфоне. С блэкджеком и WebUI.

28 марта 2026 года инженер Midjourney Cheng Lou выложил в открытый доступ библиотеку, которая за неделю набрала почти 40 тысяч звёзд на GitHub. И имя ей — Pretext. Это движок текстовой верстки на чистом TypeScript, который полностью обходит DOM и браузерный layout рефлоу. За этим стоит вполне большая проблема и красивое решение.

Давайте разберемся, что это такое, зачем оно нужно, как устроено и стоит ли тащить к себе в проект.

WebSocket vs SSE простым языком: двустороннее и однонаправленное соединение, как работает TCP и HTTP upgrade, и какие вопросы по этим темам чаще всего задают на собеседовании.

Привет!

Это 12-й выпуск Frontend Status - дайджеста по фронтенд-разработке.

В этом выпуске:

📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start.

🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу.

🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей.

🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа.

⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions.

🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG.

🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon.

🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна.

…и многое другое.

Закончился еще один месяц, а значит нам пора поделиться с Вами новостями о развитии GigaIDE. Ниже краткий обзор обновлений PRO-функционала GigaIDE, которые можно найти на нашем маркетплейсе. Обзор инкремента за февраль доступен по данной ссылке.

Каждый, кто хоть раз заглядывал на Hacker News или r/ItRunsDoom, знает традицию: DOOM должен работать на всём. PDF-файлы, SQL-запросы, кишечные бактерии, тест на беременность - список бесконечен, и каждый новый порт абсурднее предыдущего

Но я задался вопросом: а можно ли запустить DOOM внутри шрифта?

Оказалось, что можно. И вот как.

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

Если у вас одна платформа, фронтенд работает стабильно и предсказуемо. Но стоит добавить десктоп, мобильное приложение, PWA — и простая логика превращается в гору if-ов.

Меня зовут Денис Кондратьев, я фронтенд-разработчик Точка Банк. В статье расскажу, как мы интегрировали наш мессенджер на четыре разные платформы (браузер, Electron, Capacitor, PWA) и сократили время адаптации новых фич в три раза.

Когда VPN на телефоне уже не спасает, а DPI провайдера научился резать WireGuard за секунды, приходит время переносить обфускацию на роутер. В этой статье расскажу, как я сделал полноценный аддон для Asuswrt-Merlin с веб-интерфейсом, выборочной маршрутизацией и поддержкой AmneziaWG 2.0. И почему пришлось отказаться от kernel module.

Проблема:

У меня ASUS GT-AX11000 с прошивкой Asuswrt-Merlin. Обычный WireGuard на роутере через встроенный клиент Merlin работает, но провайдер его видит и режет. AmneziaWG решает эту проблему за счёт обфускации, DPI не может отличить трафик от обычного UDP.

На телефоне и ПК есть клиент Amnezia VPN, и там всё работает. Но есть нюанс...

На дворе 2026-й, и за это время как React, так и Vue сделали гигантский скачок в развитии и создании экосистемы вокруг себя. Но статистика до сих пор беспощадна к Vue. На React в два раза больше вакансий, чем на Vue. Сколько я ни спрашивал React-инженеров, ответ был всегда один и тот же: «React для серьезных проектов, а Vue так уж».. Серьезно? Почему вы до сих пор так думаете?? Ну хоть один пример приведите, что нельзя сделать во Vue. Хотя бы потратьте 1 день на изучение экосистемы Vue 3 Composition API, Vue Router, Pinia - да вы после этого забудете про свой React. А про различные useState я вообще молчу, Vue тут вообще вас всех обошел с обычными ref. Это вы еще не слышали про keep-alive.

Я считаю, что такое мнение построилось из-за простой причины: люди просто поставили свою карьеру на React, вот почему они его защищают, а компании продолжают его использовать.

Если кратко - да все с ними ТАК. Это замечательный набор современных браузерных технологий, для решения реальных задач веб-разработки. Веб-компоненты позволяют делать очень многое, более просто и элегантно, чем это было бы без них. А главное, они позволяют, с потрясающей гибкостью, решать задачи “со звездочкой” - те, которые немного выходят за рамки и требуют более творческого подхода от разработчика.

Почему-же тогда по Хабру гуляют, кхм… некие одиозные личности (не будем показывать пальцем) и рассказывают нам про то, что веб-компоненты это ужас-ужас и полный провал? Давайте разберемся.

31 марта из npm source maps утёк исходный код Claude Code. Через часы появился OpenClaude — форк с OpenAI-совместимым шимом, который позволяет подключить GPT-4o, DeepSeek, Llama через Ollama или любую модель. Разбираю, как это устроено, что реально работает, что нет, и почему «бесплатный Claude Code» — не совсем то, чем кажется.

Привет! Я Никита, Staff-инженер в крупном финтехе. В этой статье я хочу поделиться нашим опытом построения системы observability. Мы прошли путь от простых логов до сквозной трассировки, и я покажу, как это работает на фронтенде.

TL;DR: В статье разбираем опыт внедрения OpenTelemetry в крупном финтех-проекте.
Проблема: Логи без контекста не позволяют быстро найти причину 500-й ошибки в распределенной системе.
Решение: Сквозная трассировка (Distributed Tracing) от фронтенда до бэкенда.
Что внутри: Реализация CompositeLogger на TypeScript, патчинг fetch для сохранения контекста и примеры того, как превратить технические трейсы в карту бизнес-процесса. А именно - frontend реализация и практические детали интеграции.

В экосистеме JavaScript произошёл серьёзный инцидент, который хорошо показывает, насколько опасными стали атаки на open source и цепочки поставок. Исследователи StepSecurity сообщили о компрометации axios — одной из самых популярных HTTP-библиотек в npm (~83 миллионов загрузок в неделю). Злоумышленник получил доступ к аккаунту одного из ведущих мейнтейнеров проекта и опубликовал две вредоносные версии пакета: axios@1.14.1 и axios@0.30.4.

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

BIP39 вместо номера телефона, ECDH P-256 + AES-256-GCM, non-extractable CryptoKey, трафик неотличимый от HTTPS. Как это устроено, что сломалось в процессе и почему некоторые решения были болезненными.

Мне нравится писать тесты. Написание теста и последующее обновление кода для его прохождения — всегда увлекательный процесс.

Но нет ничего хуже, чем выяснение того, что проверяют существующие тесты (раньше я сам часто был автором таких тестов).

Представляю вашему вниманию мои советы по написанию высококачественных тестов для фронтенда.

Это наиболее долговечный, финансово оправданный и понятный пользователю способ написать веб-сервис. Большинство веб-сервисов следует выстраивать именно так, если только у вас нет очень веской причины действовать иначе.

Выслушав меня, веб-разработчики часто отвечают: «о, так вам нравится рендеринг на стороне сервера», на что я обычно, поморщившись, парирую — «да, в какой-то мере». Не распыляйтесь по пустякам, если собеседника отделяет от вас десятилетие невежества. Хотя бы они понимают, о чём я. 

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

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

Недавно в Амстердаме прошла конференция Vue.js Amsterdam 2026 — ежегодное мероприятие, посвящённое экосистеме Vite и современным инструментам фронтенд-разработки.

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

В этой статье разберём основные анонсы конференции: Vite 8, Vite+, Void Cloud, а также обновления Vue и Nuxt.

Современные браузеры тихо съедают экосистему JavaScript живьем.

За последние несколько лет основные браузеры выпустили нативные веб-API, которые заменяют удивительно большое количество утилит, которые мы до сих пор устанавливаем по привычке. Тем не менее, многие разработчики продолжают использовать уже ненужные, но привычные библиотеки. Если зависимость всегда работала, она остается в стеке, даже если браузер уже умеет выполнять ту же работу.

Такой подход обходится дороже, чем кажется. Каждый дополнительный пакет увеличивает вес сборки, затраты на обслуживание, частоту обновления версий и риск отказа от проекта в долгосрочной перспективе. Нативные API-интерфейсы стоят пользователям 0 КБ данных, работают глубоко в движке (часто вне основного потока (main thread)) и используют оптимизации, недоступные библиотекам.

Изначально проект планировался как простенький 3D-редактор, а-ля Tinkercad, но на стероидах, с чертежами, фасками и другими продвинутыми операциями.

После предыдущей статьи вектор разработки немного сменился. Народ захотел полноценный САПР, прямо в браузере, прям как onshape. Правда onshape работает не совсем в браузере, это тонкий клиент, который работает на серверах ..., а пользователю выводит просто картинку.

У меня на данный момент сервера нет :) Для работы моего редактора он практически не нужен. Но об этом чуть позже.

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

Excel не единственный, кто любит превращать любые данные в даты.

Если вы работаете с датами в JavaScript, то, вероятно, рано или поздно пользовались new Date(someString). Это удобно: передаём строку, получаем объект Date. Но привыкнув к Python, я был удивлён тем, насколько свободно JavaScript обращается с форматами дат. Позвольте мне проиллюстрировать это примерами.

Последнюю пару лет мы наблюдали существенный рост сообщества e18e и связанного с этим увеличения количества коммитов, направленных на повышение производительности. Во многом причиной этого стала инициатива по «очистке»: сообщество избавлялось от избыточных, устаревших или неподдерживаемых пакетов.

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

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