Нейронки

Или: как одна нелепая строка кода дала ускорение в 100 раз.

Всегда знаешь, что попался хороший баг, когда первая реакция — «как такое вообще возможно?»

Я дорабатывал панель управления одного веб-приложения и заметил, что она стала загружаться вечность. Раньше страница открывалась за секунду — теперь за десять. Что-то явно шло не так.

Естественно, я обвинил React.

Ну, конечно, в современном веб-приложении источников проблем с производительностью хватает: сторонний JavaScript, перегруженные серверы, раздутые ресурсы, отсутствующие индексы в базе данных — длиннющий список. Но десятилетия разработки для веба подсказывали: это проблема фронтенда. Я просто чувствовал это. Страница выглядела дёргающейся при загрузке. А экосистема React, при всей своей относительной приемлемости сегодня, полна способов превратить кодовую базу в запутанный тормозящий клубок.

Чтобы подтвердить теорию, я объяснил Claude, что панель загружается медленно, что наверняка виноват React, и попросил проанализировать проблемы и отсортировать их по серьёзности. И действительно, Claude нашёл кучу подозрительного в React: лишние перерисовки, пропущенные мемоизации. Выяснилось, что мы ещё не перешли на React Compiler. Я попросил Claude сделать первый проход по самым простым и серьёзным проблемам, и…

Это почти ничего не дало. Может, дело не в React?

Засучил рукава и начал разбираться по-настоящему.

1. Может, сервер медленный? Немного — но фронтенд он не блокирует.
2. Проблема во всех браузерах? Нет. Почему-то только в Safari.
3. Значит, виноват сторонний JavaScript? Intercom? Нет. PostHog? Нет.
4. Ладно, роем глубже — смотрим временную шкалу производительности.

Инспектор производительности Safari за последние годы заметно разошёлся с инструментами на основе Chromium и на этой странице работал капризно. Но картину он нарисовал вполне отчётливую: 7+ секунд тратились не на разбор JavaScript, не на вычисление стилей и не на загрузку сети. 94% процессора на M1 Max уходило на… компоновку вёрстки?

В подробностях было видно несколько проходов компоновки длительностью более 1600 мс каждый. Для сравнения: это примерно в 100 раз медленнее нормы. Что-то было серьёзно не так с тем, как браузер выстраивал страницу. Flexbox может чуть замедляться, но не настолько же.

Если вы читаете эту статью, вам зачем-то понадобилось сгенерировать код с помощью ИИ-агента. И, скорее всего, вы поискали в интернете и нашли, что есть какой-то там бесплатный ИИ-агент Qwen-Code. Вот что пишут о Qwen Code его создатели:

«Qwen Code — это агентский инструмент для программирования, который работает в вашем терминале и помогает превращать идеи в код быстрее, чем раньше»

Не слишком-то развёрнуто, верно? В этом руководстве мы за несколько минут научимся пользоваться Qwen Code и сделаем собственный небольшой проект с домашней страничкой. Важно: мы используем этот ИИ-агент для быстрой разработки сайтов, но в целом с qwen-code вы можете генерировать код на Python, C++ или любом другом языке. Или даже просто работать с файловой системой и выполнять команды в терминале!

Что понадобится для старта:

• Компьютер на любой ОС;
• Редактор Visual Studio Code (наш обзор, быстрая установка);
• Расширение Qwen Code Companion.

Приступим!

Фронтенд-разработка — это не только творчество, но и рутина: повторяющиеся задачи, отладка, документация. Искусственный интеллект, такой как GPT-5, GitHub Copilot или Cursor, становится настоящим помощником, который экономит время и повышает качество кода. В этой статье разберём пять типовых задач фронтенд-разработчика, где ИИ может радикально ускорить процесс, и покажем, как их решают на курсе «Фронтенд на автопилоте: AI-агенты на практике» от HTML Academy.

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

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

Есть кодинг по задаче. А есть — по вайбу.

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

Это может быть бесполезно с точки зрения результата, но не бессмысленно. Хороший вайб-проект — это миниатюрная лаборатория, где вы пробуете новые подходы, фреймворки, библиотеки. Или наоборот — возвращаетесь к HTML и CSS, чтобы снова почувствовать радость простоты.

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

Каждая идея — с подробным первым поисковым запросом, чтобы сразу можно было начать. Погнали.