JavaScript *

В предыдущей статье мы разобрали trackOpBits — механизм оптимизации трекинга зависимостей во Vue 3.
Но тогда мы смотрели на систему через одну конкретную оптимизацию.

Сегодня поднимемся уровнем выше.

Почти всё, что вы делаете во Vue:

В экосистеме JavaScript-разработки управление состоянием приложений всегда оставалось одной из самых сложных задач. От глобальных переменных до сложных библиотек вроде Redux и MobX — разработчики постоянно ищут более простые и эффективные решения.

Сегодня мы познакомимся с Nexus State — новой библиотекой для управления состоянием, которая сочетает простоту использования Atom-подхода с мощными функциями для реальных приложений. В этой статье мы рассмотрим архитектуру Nexus State, его возможности, и проведем объективное сравнение с существующими решениями.

Мне 16 лет. Последние 8 месяцев я учусь на Frontend-разработчика. Я решил проверить свои силы и создать инструмент, которым буду пользоваться сам. Но мой путь начался не с мощного ПК и гигабайтов интернета, а с мечты и обычного смартфона.

Мой путь в программировании начался 26 декабря 2024 года. Это была мечта, к которой я шел 5 лет. На тот момент я был «полным нулем»: у меня не было стабильного интернета и я почти ничего не знал о Frontend. Я записался на курсы, даже не до конца понимая, что это такое.

Первые две недели у меня не было ноутбука, и я писал свой первый код прямо на телефоне. Только спустя время у меня появился ноутбук и нормальный доступ к сети, чтобы узнать: что такое Frontend и какие задачи он решает?

View Transitions API: полное руководство по плавным переходам в браузере

View Transitions API часто показывают на демках с одной карточкой. Но когда вы начнёте внедрять его в реальный проект с асинхронной загрузкой, React, кастомными анимациями и поддержкой старых браузеров, — окажется, что демки умалчивают о массе деталей.

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

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

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

Для первой публикации я выбрал тему внутренней оптимизации реактивности во Vue 3 — trackOpBits и работу ReactiveEffect. Этот механизм почти не заметен при обычной работе с фреймворком, но он напрямую влияет на производительность рендера компонентов и поведение вложенных computed.

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

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

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

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

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

Поэтому некоторые популярные сервисы вообще запрещают звонки из мобильного браузера и просто отправляют пользователя устанавливать нативное приложение.

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

Привет!

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

JS/TS: Evan You — Vite, Rust, VoidZero; State of JS 2025 и новый интерфейс npm (npmx).

AI: Transformers.js v4 в NPM; тест «заменит ли ИИ опытного дебаггера».

Фреймворки: React — ViewTransition, SSG-сравнение, календарь DayFlow; Angular — обзор v22 и демо проект на Genkit.

CSS и браузеры: гистограммы и подсветка поиска без JS; предпочтения размера шрифта из системы в Chrome.

Доступность и интерфейсы: когнитивная доступность (W3C), combobox vs multiselect, якоря и UX.

Разное: ограничения и вдохновение, «искусство неправильного взаимодействия», репортаж с t-sync.

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

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

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

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

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

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

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

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

Глобальная область видимости может принимать различные формы в зависимости от того как загружаются код JS...

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

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

Stop. Хватит читать обзоры бенчмарков.

Они не расскажут, почему ChatGPT увидел 127 точек, а Gemini – только 57. Не объяснят, зачем Claude добавил рекламу в игру, которая должна была быть “просто раздражающей”.

И уж точно не покажут, кто из них думает, а кто просто генерирует текст.

Мы провели стресс-тест в пяти раундах.

Раунд 1: Вопрос, который меняет мышление.
Раунд 2: Мультимодальный подсчёт – где ИИ должен видеть.
Раунд 3: Печеньки на чёрной поверхности – где должен догадываться.
Раунд 4: Экстремальное судоку – логически рассуждать.
Раунд 5: Игра одним HTML-файлом – творить.

Время гадать закончилось. Пока одни спорят, кто круче – ChatGPT, Gemini или Claude, – мы просто взяли и проверили. Не на бумажке. Не по цифрам из пресс-релизов. На реальных задачах.

За пять испытаний каждая модель показала своё истинное лицо. Кто-то споткнулся на простом подсчёте точек. Кто-то удивил философской глубиной. А кто-то создал игру, которую не стыдно выложить в аппстор.

И да, победитель есть.

Смотрите, кто из гигантов действильно тянет.

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

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С-овских замашек.

Поехали.

У нас случилась классика: бэкенд уже отдает данные, бизнес ждет экран «вчера», а фронтендера в команде нет и ближайшие фронты заняты.

Мы рискнули и собрали MVP‑интерфейс за неделю — без выделенного фронта, но на корпоративном стеке (Vue/TypeScript) и с дизайн‑системой.

Это не история «AI все сделал». Это история про то, как правила + дизайн‑система + ревью как для джуна могут делать из AI‑ассистента нормальный инструмент, а не генератор мусора.

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

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

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