JavaScript *

Фронтенд-разработка давно перестала быть просто «вёрсткой сайтов». Сегодня это сложная экосистема: фреймворки, state-менеджмент, TypeScript, оптимизация производительности, работа с API и постоянный поток новых инструментов. Но за всей этой технологической гонкой часто теряется главное: что на самом деле нужно знать начинающему разработчику, где проходит грань между джуном и сеньором, и почему умение проходить собеседования — такой же навык, как и писать код.

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александром Ламковым — фронтенд-разработчиком, основателем YouTube-канала Friendly Frontend (аудитория более 50 000 подписчиков) и телеграм-канала «Friendly Frontend», опытным наставником, который провёл более 200 персональных консультаций с разработчиками, помог прокачать их навыки. Александр успешно прошёл собеседования на позицию сеньора в нескольких крупных IT-компаниях России, а сейчас работает в компании ВК. В этом выпуске узнаем, что такое современная фронтенд-разработка, какие навыки нужны, чтобы войти в профессию, что выбрать (найм или фриланс), и сколько на самом деле зарабатывают фронтенд-разработчики.

Около года назад я решил сделать универсальное open-source решение для визуализации списков. В первых версиях я отрабатывал технологию виртуализации с различными параметрами, было много исследований, вопросов, ну и конечно дефектов). Сегодня же состоялся релиз X.12.X версии, которая работает под управлением Angular 14-22. Хочу рассказать на что способен инструмент (ng-virtual-list), какие задачи решает и проведу краткий обзор с демонстрацией примеров.

Все приведенные ниже примеры содержатся в документации с примерами кода.

Инструмент ng-virtual-list это виртуализированные, высокопроизводительные списки с множеством различного функционала, которого нет у стандартных списков.

Небольшой R&D о современных альтернативах Electron для десктоп‑приложений на веб‑технологиях. На одинаковом тестовом приложении (React + TypeScript + Vite) сравниваются ElectroBun, NeutralinoJS и Wails: как устроена их архитектура, каким образом они взаимодействуют с ОС, что происходит под капотом и почему результаты по памяти так сильно отличаются. В статье есть практические наблюдения, замеры потребления ОЗУ, плюсы и минусы каждого подхода, а также рекомендации, в каких сценариях выбирать минималистичный WebView‑подход, полноценный backend на Go или браузерный рантайм с максимально широкой поддержкой Web API и графики.

Баннер с запросом согласия на cookie есть почти на каждом сайте. Но часто он существует «для галочки» — данные в аналитику улетают сразу при загрузке страницы, независимо от того, что выбрал пользователь. И если раньше это была просто недоработка, то с 1 сентября прошлого года в 152-ФЗ (Федеральный закон «О персональных данных») был внесен ряд изменений, в том числе, появились новые требования к оформлению согласия на обработку персональных данных. Во-первых, оно должно быть получено в явном виде, а во-вторых, существенно вырос штраф за несоблюдение этого пункта. Компаниям было дано время на устранение несоответствий закону, а со второй половины этого года должны начаться массовые проверки того, как компании собирают и хранят персональные данные. Так что если вы до сих пор не привели эту часть вашего сайта в порядок — сейчас самое время этим заняться.

Разберемся с этими настройками на примере нашего сайта cleverdata.ru: если ничего не делать/использовать дефолтные настройки/использовать стандартный набор Tilda с Яндекс метрикой, то ... баннер отображается, но Яндекс.Метрика загружается и собирает данные ещё до того, как пользователь успевал нажать хоть какую-то кнопку. Конечно, такие настройки использовать нельзя — это нарушает требования 152-ФЗ и GDPR, которые обязывают получить явное согласие пользователя до начала сбора данных. И мы так, естественно, не делаем. А можно ли как-то исправить эту ситуацию? – Можно!

Привет, я Анна Таюрская, инженер технической поддержки (L1) компании CleverData. Я знаю, как решить эту проблему.

Как выкатить собственный движок JavaScript

Привет, Хаброжители! Мы подготовили для вас перевод статьи, в которой автор делится опытом создания собственного движка JavaScript с нуля.

Автор на языке Go с нуля создаёт простой движок JavaScript. В статье пошагово разобраны ключевые этапы: от лексического анализа и построения AST до реализации вычислителя и встроенных функций (print, fetch, JSON). Отличный материал, чтобы понять, как код на JS превращается в работающие инструкции.

В конце цикла я прогнал скрипт по своим логам Claude Code и увидел число, в которое сам не сразу поверил. За 25 дней, с 24 апреля по 19 мая, я сжёг 17,4 миллиарда токенов. Один человек, 344 сессии, 75 587 ответов ассистента, 176 695 строк транскриптов. Посчитайте это по тарифам API, и выходит 39 651 доллар. Около 3,17 миллиона рублей. Примерно 1586 долларов в день. Почти всё это Opus, самая дорогая модель на рынке.

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

Разбираю, почему нативного EventSource часто недостаточно для production SSE: авторизация через headers, контролируемый reconnect, backoff, race conditions, stale-stream watchdog и синхронизация нескольких вкладок через Web Locks + BroadcastChannel.

На базе этих проблем я вынес real-time слой из AI SaaS-продукта в open-source библиотеку sse-runtime и заменил ей самописную инфраструктуру: −3 455 строк кода в production PR, один useSSE-хук вместо ручного reconnect, leader election и отладочного boilerplate.

У $mol реактивность, локальное хранилище, оффлайн и темы приезжают одним пакетом. Минусы есть, но они почти все про коммьюнити и тулинг, не про сам код.

Начинаю с минусов, чтобы было честно. Потом — плюсы и таблица сравнения с React/Angular/Vue. Главная цифра: за 10 лет у $mol один мажорный релиз. У React за то же время 19 версий, у Angular 21.

Внутри: ОРП, view.tree, типизированный CSS, локализация без extractor-плагинов, виртуализация любой вёрстки автоматом, кросс-платформа Web/Tauri/MV3/TMA. Живые демо: треугольник Серпинского React vs $mol, корнер-кейс реактивности на Svelte, js-framework-benchmark с включённым $mol.

TL;DR: Привет, Хабр. С 2 по 12 мая я в режиме нон-стоп писал Doday — кросс-платформенный todo: web, Telegram Mini App, чат-бот. Получилось 317 коммитов, ~40 000 строк кода, 633 теста, 38 модулей в app/. Стек — FastAPI + HTMX + Alpine.js + Tailwind, без единой строчки React. Писал в паре с Claude Code, и не скрываю этого — расскажу как именно и какая часть кода реально моя голова, а какая — клавиатура. Грабли, цифры, ссылки внутри.

Предположим, вы пишете интерпретатор машины Тьюринга, запущенный в Web Worker’е. UI должен показывать трейс — как машина шагает от состояния к состоянию, что пишется на ленту, как двигается каретка. Чтобы пользователь успевал считывать изменения в UI, между итерациями движка нужна короткая задержка — миллисекунды, регулярно, на каждом шаге. Это приостановка движка между итерациями — регулярная и предсказуемая, не «пауза» в смысле UI-кнопки «Пауза» (та останавливает машину до клика «Продолжить»).

Возникает вопрос: где именно в цикле итерации воркеру нужно реализовать приостановку? Кандидатов два, и выбор между ними фиксирует сразу два контракта: хуков движка и протокола между воркером и основным потоком. Выбрать точку — это спроектировать обе стороны сразу; промахнуться — испортить обе. Эта статья — про этот выбор.

Как из миксинов для валидации форм вырастает полноценная TypeScript-библиотека с плагинами, масками и 500+ скачиваниями в неделю. История рефакторинга, архитектурных решений и работы над ошибками длиной в 10 месяцев.

Полгода назад я узнал о крутом инструменте — Apps Script. Это расширение Google для их приложений, например, Таблицы, Документы, Презентации и т. д. Сначала при помощи этого инструмента я автоматизировал выгрузку данных из CRM в Google таблицу для спортивной школы и настроил удобное отображение этих данных, а потом, когда распробовал инструмент на вкус, сделал личного Telegram-бота. Об этом и пойдет дальше речь.

В 2026 году уже не нужно гадать, человек писал GitHub-репозиторий или AI. Я сделал Chrome-расширение, которое оценивает репозиторий по прозрачным эвристикам: README, коммиты, структуру файлов и метаданные. Без нейросети, без чёрного ящика — только понятные правила и объяснимый вердикт.

В статье рассказываю, как появился детектор, почему просто “число AI-похожести” оказалось недостаточно, как я перешёл к профилям вроде “AI-код”, “AI-документация” и “код человека”, и какие сигналы реально помогают отличать vibe-coded репозиторий от ручной работы.

Почему Debian 9, PHP 7.0 и никаких фреймворков. И как поднять HTTPS за 5 минут

Предисловие для тех, кто не читал первую статью

В прошлый раз я рассказал, как хотел сделать две странички для SAMBA и NFS, а получилась панель управления NAS на 20+ страниц. Проект назвал Mini Bucket.

Важно: та версия была бета. Сырая, с недоработками, но живая. Её задача — показать концепцию. А народ заинтересовался. Значит, надо доводить до ума.

Теперь — версия 3.6.2. Исправлена куча проблем, добавлена безопасность, появился отдельный домен, форум и вики. И сегодня я по шагам покажу установку со скринами.

Но сначала — кратко о том, что изменилось. А потом — чистая практика....

Здравствуйте, товарищи! Эта статья про state management во фронтенде, с непривычного угла. За два года я ни разу не написал ни одного редьюсера. Расскажу, как я к этому пришёл, что слышу со стороны про сторы, и почему вам, особенно если вы только заходите во фронтенд, не надо учить Redux в принципе.

Сначала немного о себе, потом про то, что такое стор и почему я считаю его антипаттерном. Затем покажу, как без него живёт моё реальное приложение. И разберем возражения

Компании уже оплачивают сотрудникам Claude Code, Cursor или Codex, но не всегда видят рост производительности.

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

Разбираю, зачем команде общая память, и при чём тут GBrain, OpenBrain и обычные Markdown-файлы.

Привет!

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

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

📺 Страница отрисована, а интерфейс всё ещё «оживает»: отложенная гидратация в TanStack Start на карусели Jack Herrington и подкаст с Андерсом Хейлсбергом — от Turbo Pascal до того, как ИИ меняет ремесло, когда код пишут не построчно — чтобы понять, где теряется скорость и куда движется разработка.

🤖 Половина кода уже с ИИ, а доверия меньше: опрос State of AI 2026 (54% сгенерированного кода), Яндекс и тысячи конфликтов при мерже Chromium, перцептрон 1959 года и «чтение мыслей» модели Anthropic — чтобы смотреть на внедрение ИИ цифрами и без иллюзий.

🛡️ Пустили агента в репозиторий — а что он может сломать: разбор Positive Technologies и история, когда ИИ «находит» CVE, который уже был в обучающих данных — чтобы не открывать доступ вслепую.

💫 Анимация замирает вместе с React: управление бесконечными CSS-циклами без прыжков и сравнение CSS, Motion и GSAP на главном потоке — чтобы интерфейс оставался плавным без лишнего JavaScript.

⚡ Нужна коллаборация как в Figma и Miro: Hocuspocus от Tiptap на Y.js и CRDT без гонок правок — WebSocket, офлайн и Redis — чтобы собрать совместное редактирование в своём редакторе без тяжёлого бэкенда.

⚡ Поиск раздувают до эмбеддингов и LLM: Fuse.js ~6 КБ с нечётким поиском, кириллицей и Web Workers в 7.4.0 — чтобы находить по списку в браузере без сервера и векторной базы.

⚡ TypeScript кажется очевидным, пока не упёрлись в типы: 15 коротких приёмов от Matt Smith — satisfies, проверка «все варианты учтены», строгий режим — чтобы писать безопаснее и без лишних аннотаций.

⚛️ React-шаблон на 35 000 звёзд без хаоса в репозитории: разбор Bulletproof React на Habr и MUI X 9.3 — чтобы взять проверенную архитектуру и не собирать стек с нуля.

🔥 Ember 7.0 без сюрпризов при мажоре: в основном сняли устаревшее, путь через 6.12 и Vite по умолчанию — чтобы обновиться без лотереи.

🅰️ Angular 22 меняет правила игры: OnPush по умолчанию, signal forms и инструменты для агентов в API — чтобы заложить новый проект на актуальных примитивах, а не по инерции.

𝐒 Svelte: $state.eager и pending больше не рвут зависимости, батчи идут связным списком — чтобы асинхронный UI вёл себя предсказуемо после обновления.

📦 Solid 2 в бета-версии, звонки WebRTC в production и шрифтовые иски на 15,3 млн ₽: асинхронность как примитив, грабли CallKit и SFU, PHP-парсер для проверки сайта — чтобы не удивляться ни релизу, ни иску.

🌎 Браузер снова забирает вёрстку у хаков: column-rule и row-rule в зазорах grid/flex и HTML внутри canvas за флагом — чтобы меньше DOM-обходов и проще UI поверх 3D.

🌐 Стандарты без костылей: сравнение объектов по значению (Composites в TC39) и элемент <install> для PWA без своего JavaScript — чтобы меньше полагаться на ссылки и самописные кнопки установки.

🛠️ Агенты под контролем: statewright с фазами и лимитами, свой Claude Code за вечер на DeepSeek и экспериментальный агент доступности GitHub н

Как обычно в начале месяца мы рассказываем вам о том, что изменилось в GigaIDE за прошедший месяц — май. Соответствующий обзор за апрель доступен здесь. Ниже — краткий обзор обновлений Pro-функциональности GigaIDE, который можно найти на нашем маркетплейсе.

Привет, Хабр!

Меня зовут Сергей Волков, я фронтенд-разработчик в компании VK. Мы используем MobX для работы с реактивными значениями в веб-приложениях, поэтому я хочу познакомить вас с этим инструментом и показать, почему на него стоит обратить внимание.

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