JavaScript *

Привет!

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

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

Медиа: Mastra Workspaces (свой «Claude Code»), Рич Харрис про RSC, безопасность фреймворков.

AI: безопасность агентов, пост-обучение LLM (Netflix), Brave Search API.

A11y: Axe MCP в DevTools, чеклист Shopify, role="presentation".

Браузеры: Interop 2026, WebMCP и ранний доступ в Chrome.

3D: 3D-труба на R3F, procedural snake на Three.js.

CSS: эластичный текст, pie chart, параллакс, пирамиды, вихрь, Ambient, освещение.

JS/TS: sql.js, Perspective BI, TS-дженерики.

React: State of React 2025, shadcn vs MUI, HighTable, FrankenTUI, Ant Design 6.3, оптимизация.

UX/UI: фоновые задачи, интерфейсы для агентов, семантические токены.

Тестирование: JIT Tests от Meta (тесты от LLM).

Разное: Electrobun, учебник математика/CS/AI, WarCraft 3 UI, npmx, Stockfish 18.

Все мы видели эти заголовки: «ИИ оставит программистов без работы», «Копирайтеры больше не нужны», «Завод — наше всё». Паника, хайп, мемы.

Но есть факты: Число резюме к числу вакансий увеличилось в 2 раза за 2025 год в сфер ИТ.

Поэтому я сделал шуточный сервис ai‑fire.ru, который показывает, отберёт ли у вас работу ИИ.
1️⃣ вводишь свою профессию
2️⃣ жмёшь кнопку
3️⃣ узнаёшь — пора паниковать или пока можно выдохнуть

Привет, Хабр! (И тебе, питонист, который считает свой язык идеальным, и тебе, JS-ник, у которого уже вышел новый фреймворк, пока ты читал это предложение, и тебе, 1С-ник, который устал объяснять, что ты тоже программист всем во круг.)

Наткнувшись миллионный раз на статью «КАКОЙ ЯЗЫК ПРОГРАММИРОВАНИЯ ВЫБРАТЬ?» я задался вопросом, почему люди ещё не поняли ответа на этот вопрос, ведь он на поверхности.

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

Добрый день! Меня зовут Андрей Слекеничс, я PO GigaIDE, и сегодня мы продолжаем наш экскурс по функциональности GigaIDE.

Первая и предыдущая статьи цикла доступны здесь и здесь. Сегодняшний материал — последний, затрагивающий функциональность GigaIDE Community, и первый, в котором мы переходим к возможностям уже только GigaIDE PRO.

React Compiler обещает избавить от ручной мемоизации и вернуть разработчику фокус на логику интерфейса. Но за этой когнитивной разгрузкой скрывается тонкий риск: в ряде случаев компилятор тихо откатывается к обычному поведению React, и вы узнаёте об этом только по деградации UX. В статье — практический разбор «тихих» сбоев, ограничений синтаксиса и способа заставить сборку честно сигнализировать о проблемах через ESLint.

Я до сих пор бомблю от редизайна Duolingo.

Чтобы тренироваться без отвлечения на геймификацию, написал небольшой тренажер грамматики английского языка. Супер простой (vanilla JS + HTML), но со своими особенностями.

Особенности решения — под катом.

Наверное, каждый из нас ловил себя на мысли: что отправить на день рождения в этот раз? Просто текст, тёплую фотографию или голосовое сообщение? И сразу вспоминается это чувство, когда ищешь или обдумываешь креативный текст, а потом вспоминаешь о милой картинке с котиком, гифке с шампанским или стандартном «С ДР!» — и отправляешь, чисто для галочки.

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

Привет, Хабр! Меня зовут Сергей, я фронтенд-инженер в Банки.ру.

В этой статье расскажу, как Zod помог нам перестать писать валидацию на уровне полей, подружился с React Hook Form и стал единым источником правды о структуре данных.

К Zod мы пришли не сразу. Долгое время типы и валидация у нас жили в разных слоях приложения: TypeScript определял структуру данных во время разработки, а отдельные функции или библиотеки (вроде Yup) проверяли входящие значения в рантайме.

Это классическая проблема: дублирование логики и рассинхрон. Типы в interface поменялись, а валидация осталась прежней (или наоборот). Мы пробовали Yup, но он казался громоздким в связке с TS: типы приходилось выводить вручную или мириться с тем, что схемы выглядят непрозрачно. В какой-то момент стало непонятно: зачем тащить отдельную библиотеку, если проще написать if (typeof x === 'string')?

С переходом на Zod всё стало значительно проще: одна схема одновременно является и валидатором, и источником типа данных.

Решил один мой коллега (не разработчик) заняться пет-проектом: создать платформу с элементами соцсети и встроенным картографическим плагином. И вот приходит этот коллега ко мне с вопросом по части фронтенда: «А как бы мне отрендерить страницы: на сервере или на клиенте?», описывая то решение, которое он уже сделал и которое в целом работает.

Что ж. Меня зовут Андрей, я фронтенд-разработчик в Selectel. В этой статье я расскажу и покажу, какие виды рендеринга веб-страниц существуют и в каком случае лучше использовать тот или иной подход. Разберем все это дело на примерах. Сперва пройдемся по теоретическим основам, а затем — по практике. Если так сложилось, что и вас жизнь привела к подобным фронтендерным запросам, но должного опыта еще нет, добро пожаловать под кат.

📉🐻 Как ИИ получил руки для торговли на бирже

Claude Code уже разбирается в техническом анализе, умеет искать в интернете для фундаментального, может быть запущен удаленно на сервере с iPad через Claude Code on the web, умеет анализировать файлы логов сам программируя python скрипты.

Осталось ли собрать всё это в кучу...

Как я сделал приложение для обхода Discord и YouTube на macOS (и Windows тоже)

TL;DR: Написал open-source десктопное приложение UnblockPro на Electron, которое в один клик обходит DPI-блокировки Discord, YouTube и других сервисов. Работает на macOS и Windows. Без VPN, без серверов, без абонентки. Код на GitHub — by-sonic/unblock-pro.

Зачем вообще это было нужно

С осени 2024 года ситуация с доступом к Discord и YouTube в России стала, мягко говоря, непростой. VPN — вариант, но:

Платные сервисы стоят денег и сливают скорость

Бесплатные — сливают данные

Не все работают стабильно

Настраивать VPN для каждого устройства — боль

Привет, Хабр! (И тебе, 1С-ник, который привык к «желтой» программке, и тебе, веб-разработчик, который до сих пор думает, что 1С - это только про накладные и бухгалтеров.)

В прошлой серии мы выяснили, что «1С:Предприятие.Элемент» - это не та «желтая программа», к которой привыкли бухгалтеры, а вполне себе модный cloud-native зверь с IDE в браузере. Но слова - это дешево. Разработчику нужно видеть код, архитектуру и понимать, как это соотносится с тем, что он уже знает (будь то 1C, Python или JavaScript).

Сегодня мы лезем под капот. Мы разберем синтаксис, систему типов, декларативный UI и узнаем, как 1С реализовала ORM, который (спойлер) удобнее многого, что вы знали, но не без своих 1С-овских замашек.

Поехали.

Когда заходит разговор про WebAssembly, где-нибудь в начале дискуссии обычно появляется комментарий в духе «А что, собственно, произошло?»

Этот язык преподносили как нечто поворотное. Неужели это просто был яркий маркетинг? А может, очередной случай с обречённым на провал апплетом JVM?

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

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

Итак, начнём!

В статье реализуется собственный Promise в JavaScript. Разбираем базовую модель промисов, проблемы наивной реализации и то, как они решаются в спецификациях Promises/A+ и ECMAScript.

Материал предназначен для разработчиков, которые используют Promise и хотят понять, как он работает внутри.

Привет!

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

В этом выпуске — 30+ ссылок: разбираем, почему Angular живёт в банках и корпорациях, AGENTS.md vs skills в Next.js. Плюс CSS, который заменяет десятки строк JS, React Compiler от А до Я, Vue-слоты и Regle, вайбкодинг-исповедь «я сдался», WebGL-галерея на GSAP + Three.js, и ещё много всего интересного!

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

Чтобы не городить глобальные переменные и не писать громоздкие конструкции (что почти всегда ведет к багам), мы посмотрим на еще одну фишку JS.

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

Бывало такое: смотрите вы на красивую страницу интернет-магазина, открываете консоль разработчика (ту самую, по F12 или через правый клик), а там — лес из тегов, который вообще не похож на то, что вы видите глазами?

Привет, Хабр! Меня зовут Александр Дудукало, я автор курса по JavaScript. В этой статье мы продолжаем знакомиться с элементами страницы, а именно с DOM. Эти знания вам точно понадобятся в работе с любым проектом. Давайте же больше узнаем, что это за дерево и как с ним работать. Поехали.

В 2026 году обновят JavaScript. Окончательный список изменений сформируется из проектов ECMAScript, достигших 4 этапа к марту. Но многие из них уже на заключительной стадии, а другие готовы и доступны в некоторых браузерах и средах. Под катом — что ждёт разработчиков и какие проблемы будут решены в этом апдейте.  

Всем привет!

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

С одной стороны, есть «конструкторы» типа unified, remark и rehype. Штуки мощные, но настраивать весь этот AST-конвейер и систему плагинов — это какой-то оверхед и лишняя сложность, имхо.

С другой стороны, есть @next/mdx, который вроде и ок, но слишком завязан на страницах и вообще не умеет работать на клиенте.

Раньше я обычно выбирал что-то вроде markdown-to-jsx или react-markdown.

DX у них приятнее, работают и на клиенте, и на сервере, весят мало.

Но вот беда: они «из коробки» не переваривают HTML или MDX, и ты снова вязнешь в настройке плагинов. А если добавить туда i18n (типа i18next или next-intl), начинается настоящий ад. Куча if/else в коде, чтобы отрендерить нужный язык, и бандл раздувается до небес. Плюс вечные косяки с front-matter. Ну и до недавнего времени всё это было только для React.

В общем, решил я написать свое решение для intlayer. Чтобы просто работало.

> К слову, за основу я взял форк markdown-to-jsx v7.7.14 (от quantizor), который базируется на simple-markdown v0.2.2 (от Khan Academy).

Когда пилил этот парсер, ставил перед собой такие цели:

- Максимально легкий вес

- Кросс-фреймворковость (React, Vue, Svelte, Angular, Solid, Preact)

- Простая настройка: никаких бесконечных цепочек плагинов

- Поддержка SSR и клиентского рендеринга

- Настройка на уровне провайдера: можно легко прокинуть свои компоненты из дизайн-системы

- Компонентный подход: полный контроль над рендерингом каждой части приложения