JavaScript *

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

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

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

Знакомая ситуация? Вы открываете файл контроллера на 2000 строк. Там перемешаны SQL-запросы, HTML-разметка, бизнес-логика и комментарии на ломаном английском. В голове начинает играть тревожная музыка, а внутренний голос шепчет: “Закрой это немедленно, пока оно не сломалось”.

В психологии это называется “когнитивная перегрузка”. Мозг просто отказывается парсить такое количество переменных одновременно. Раньше программистам приходилось часами медитировать над распечатками кода, как сыщикам, пытаясь прокачать навык “Внутренняя империя”.

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

Здесь мы разберем 6 фундаментальных паттернов промптинга, которые вытащат вас из любой ямы.

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

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

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

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

Хотите OpenClaw на русском? Официальной локализации нет и не планируется. Я написал перевод OpenClaw на русский через reverse proxy — прослойка инжектит JS-оверлей в HTML, переводит интерфейс через MutationObserver и не трогает ни строчки в исходниках. Обновления OpenClaw не ломают перевод. Рассказываю архитектуру, код и грабли.

Решил написать продолжение к предыдущей моей статье Операционная система Анна. Назвал "операционной системой" скорее как отсылку к фильму "Она" (Her) - понимаю, что это, конечно, не ОС в классическом смысле, так что прошу воспринимать это как художественное название, а не технический термин. Ну и вот недавно моя жена затеяла вести расходы в Google Sheets. Увидел её мучения о том, как создать формулы, листы и т. д. В итоге ей посоветовал поставить Анну на её домашний компьютер. При установке она настроила интеграцию с Google Sheets. Потом я ей посоветовал попросить Анну сделать следующее:

Как-то я вспоминал, как будучи школьником мы частенько собирались, чтобы поиграть в третьих героев. Как вы понимаете, ни одна из этих партий не только не доводилась до конца (про это будет картинка в статье), но и даже не доходила до битвы между игроками-человеками. И тогда ко мне пришла идея реализовать сетевой вариант игры по мотивам героев. Изначально задумка была сделать что-то типа Kings Bounty: у игрока один герой, он ходит по карте, подбирает сундуки, нанимает отряды и, наконец, находит другого игрока на карте и бьётся с ним. А потом я подумал, ведь самое интересное в героях – это тактические бои, почему бы сразу не предоставить игроку армию? Ведь на шахматных серверах людей не заставляют добывать фигуры, а сразу выдают полный комплект! Мне кажется, что в подобных проектах самая трудоемкая часть – это графика и графический движок. Поэтому я начал работу именно с этой части, а в статье расскажу про текущее состояние и немного моментов разработки.

Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit. Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

Когда разработчик приходит в Next.js из обычного React SPA, он часто тащит с собой старую схему мышления. Есть поле ввода, значит будет useState. Есть поиск, значит будет useEffect. Есть список данных, значит будем следить за изменением состояния и вручную запускать новый запрос.

На маленьком экране это вроде работает. Но очень быстро выясняется, что в приложении уже не одно состояние, а три. Есть значение в поле, значение в URL, данные, загруженные по одному из этих значений. Потом появляется четвёртая проблема. Кнопки Back и Forward начинают вести себя странно. Ссылкой на результат поиска неудобно делиться. А отладка превращается в угадайку, потому что не до конца понятно, что именно сейчас считается главным источником правды.

В App Router это решается проще. Если фильтр является частью состояния страницы, его логично держать в URL. Тогда схема становится прямой: URL изменился -> сервер прочитал searchParams -> выполнил fetch -> отрендерил новый список. В этот момент Next.js начинает восприниматься как понятный инженерный инструмент.

Я периодически провожу технические интервью и смотрю pet-проекты кандидатов.

И почти всегда вижу одну и ту же картину:

Используется localStorage или заглушки вроде jsonplaceholder.

Я прекрасно понимаю, почему так происходит:

Всем привет!

Меня зовут Михаил Витик, я работаю в Лемана Тех техлидом в сервисной команде, которая поддерживает команды разработки сайта Лемана ПРО.

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

Эта задача и привела меня к идеям автоматической миграции, codemod‑трансформеров и использованию ИИ. В этой статье подробно расскажу о практическом опыте разработки автоматического мигратора кода на примере миграции с Linaria — CSS‑in‑JS решения — на CSS Modules.

Привет!

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

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

📺 TanStack AI генерирует картинки, а не только чат-ботов.

🤖 Почему ИИ выдаёт глупый код — и трёхуровневая архитектура, которая это исправляет.

🎨 Математическая модель masonry-раскладки на Flexbox — с алгеброй, а не «работающим примером».

⚡ TypeScript 6.0, обновления безопасности Node.js, петиция против AI-кода в ядре Node.js и Kafka из Node.js по-взрослому.

⚛️ TanStack улучшил пропускную способность SSR в 5 раз, а Strawberry Browser переписал 130 000 строк с React на Svelte за две недели.

🅰️ Angular выпустила официальные скиллы для AI-агентов.

💚 Компоненты визуализации звука для Vue.js на Web Audio API.

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

Открыл Postman, потыкал эндпоинты, всё ответило 200 — вряд-ли хорошее тестирование Разбираю что на самом деле нужно проверять в API, показываю примеры на Postman и Jest, и даю чеклист который можно взять и использовать прямо сейчас.

Когда меня просят подсказать, как структурировать веб-сервис, я всегда начинаю с одного и того же: напишите сервер, который в ответ на HTTP-запросы выдаёт текст в формате HTML.

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

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

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

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

AI-копилот за 40 секунд сгенерировал мне форму на 180 строк с валидацией через zod и сэкономил полчаса. А потом потратил два моих часа на отладку хука с race condition, который я бы написал сам за 40 минут. После месяца плотной работы с Cursor, Copilot и ChatGPT на продакшн-проекте React/Next.js я вывел для себя систему: какие задачи отдавать AI, а к каким его подпускать нельзя.

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

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

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

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

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

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

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

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

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

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

Здравствуйте, меня зовут Дмитрий Карловский, и я пилил веб-компоненты, когда их ещё не придумали, делал полноценные компоненты на AngularJS, когда там ещё были только директивы, и разработал компоненто-ориентированный фреймворк $mol с инверсией контроля и статической типизацией, когда это ещё не было мейнстримом. Короче, я немного в теме. И сейчас я расскажу вам, почему мы сразу отказались от Web Components и почему у них нет никаких перспектив.