Фронтенд

Вчера до вершины популярности Hacker News добрался этот пост Джоны Гловера:

Может ли Claude воссоздать веб-сайт Space Jam из 1996 года? Нет. Или, по крайней мере, не с моими навыками промптинга. Требуется помощь, потому что я хочу сохранить этот веб-сайт навечно, но это никак нельзя сделать, кроме как попросить Claude воссоздать его из скриншота. Поверьте мне, я менеджер по разработке со степенью по computer science. Пожалуйста, помогите 😞

Чтобы уточнить подробности своей просьбы, Джона передал Claude Code (Opus 4.1) скриншот лэндинга, папку с изображениями и следующий промпт:

Я даю тебе:

1. Полный скриншот страницы лэндинга Space Jam.

2. Папку с сырыми графическими ресурсами**, извлечёнными с исходного сайта

Твоя задача — максимально точно воссоздать страницу лэндинга в полном соответствии со скриншотом.

С подобными задачами кодинг-агенты справляются идеально. Как я часто говорю, все задачи — это задачи поиска, но этот принцип не всегда просто применить на практике. Однако в данном случае применить его очень просто! У нас есть скриншот, поэтому diff пикселей сильно упрощает работу!

Вообще, можно сказать, что сам по себе Claude Code не смог бы с этим справиться. Но Claude с конфигурациями nori¹ просто обязан это сделать.

Так что вызов принят.

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

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript. Сегодня мы поговорим о методах массивов. Если коротко, вы узнаете, как легко и элегантно работать со списками данных, не используя громоздкие циклы. Детали внутри.

Фронтенд переживает очередной виток переосмысления технологий. После десятилетия доминирования SPA-подхода, React-подобных экосистем и инструментального «комбайна» из Webpack/Vite/TypeScript/Redux появляются идеи возврата к простоте. Это о том, чтобы минимизировать JavaScript, отдать больше задач на сервер и перестать городить frontend + backend там, где это не нужно. В этом контексте библиотека HTMX стала одним из заметных феноменов последних лет.

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

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

Погнали!

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

В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.

Когда команда проектирует систему анимаций, важно фиксировать принципы в дизайн-системе. Это помогает избежать хаоса и гарантирует согласованность между продуктами. Хорошая практика — описывать длительность, кривые ускорения и паттерны движения как переменные, чтобы и дизайнеры, и разработчики говорили на одном языке. Например, motion-tokens, где заданы типовые параметры переходов: fast-out-slow-in, linear-out-slow-in и т.д.

На зрелом уровне анимация становится не надстройкой, а частью архитектуры интерфейса. Она помогает продукту чувствоваться цельным, обеспечивает предсказуемость и ритм, а главное — создаёт ощущение «живого» цифрового опыта. Привет, я Максим, frontend-разработчик в компании SimbirSoft, в этой статье расскажу, как сделать полезный для пользователя UI.

Привет, Хабр! На связи Никита Ли, я Frontend-разработчик в Рунити. Вокруг сборщиков последние годы кипят страсти: большинство боготворит Vite, кто-то экспериментирует с esbuild, а энтузиасты активно продвигают инструменты на базе Rust — прежде всего Rspack и SWC. На фоне этого Webpack нередко называют пережитком, который якобы тормозит развитие команд.

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

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

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

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

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

Давайте посмотрим, что я вам подготовил.

Команда JavaScript for Devs подготовила перевод статьи о нововведениях WebStorm 2025.3. В обновлении — новая тема интерфейса Islands, серьёзные улучшения для монорепозиториев, поддержка удалённой отладки и интеграция умных ИИ-агентов прямо в IDE.

Расскажу о своем опыте использования кассового фронта на 1С, отдельно для РИБ (когда каждый фронт является отдельной базой, обменивающейся данными с центральной базой) и отдельно для облака (когда все фронты работают в центральной базе).

Привет, Хабр! Меня зовут Карлен, я Lead Fullstack разработчик в ITFB Group. В этой статье хочу поделиться своим мнением о том, как выбрать библиотеку или фреймворк для вашего следующего проекта. 

Этот выбор напоминает мне подбор гардероба для важного мероприятия: ошибешься — и проект ждут дополнительные проблемы, угадаешь — и ты на вершине успеха! Чтобы не попасть в просак с выбором, давайте детально разберем ключевые различия между React и Vue и определим, на что стоит обратить внимание.

Привет, Хабр. Я Сергей Осипов, архитектор дизайн‑системы в T2. Вместе с моим коллегой, Данилом — экспертом группы разработки — мы подготовили материал, в котором подробно разберем процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации.

Команда JavaScript for Devs подготовила перевод большого апдейта от команды TypeScript. Разработчики рассказали, как идёт переписывание компилятора на нативный код, что уже работает в превью TypeScript 7, какие ограничения остаются и почему версия 6.0 станет последним релизом на JavaScript. Новый TypeScript обещает серьёзный рывок в скорости и стабильности — самое время понять, что нас ждёт.

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

Один особенно мудрый взрослый (где-то в 1996 году) однажды отвёл меня в сторону и сказал: «Знаешь, хорошо, что программирование приносит тебе удовольствие, потому что в будущем оно тебя не прокормит. Делать это из любви, а не ради денег — отличный подход.

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

Через пять лет соберётся целая библиотека объектов, где они будут лежать подобно книжкам на полках, и бизнес сможет решать любую программную задачу по щелчку пальцев, просто комбинируя нужные библиотеки как детали LEGO. Вы ему не потребуетесь». 

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

И вот я здесь почти 30 лет спустя, и разработка, несмотря ни на что, продолжает меня кормить. Существует опенсорс, и всегда находятся библиотеки, с помощью которых я могу скроить что-то нужное. Постоянно возникают новые серии задач, для которых ещё нет готовых решений. Комбинирование деталей LEGO по-прежнему требует усердного труда. Как только я решаю эту задачу на одном уровне абстракции, мы переходим на другой… и так продолжается по кругу.

Веб-разработчики нередко воспринимают браузер как «черный ящик», который каким-то чудом превращает HTML, CSS и JS в интерактивные веб-приложения. На самом деле современный браузер — будь то Chrome (на базе Chromium), Firefox (Gecko) или Safari (WebKit) — представляет собой чрезвычайно сложное программное решение. Он управляет сетевыми запросами, разбирает (парсит) и выполняет код, рендерит графику с ускорением на графическом процессоре (GPU) и изолирует контент в отдельных процессах для обеспечения безопасности.

В этой серии статей мы подробно рассмотрим, как устроены современные браузеры, сделав акцент на архитектуре и внутреннем устройстве Chromium, но также отметим ключевые отличия в других браузерах. Мы рассмотрим весь цикл: от сетевого стека и конвейера парсинга до рендеринга с помощью Blink, выполнения JS с помощью движка V8, загрузки модулей, многопроцессной архитектуры, песочниц безопасности и инструментов разработчика. Главная цель — дать понятное и доступное объяснение того, что происходит в браузере "под капотом".

Этот стартовый сборка для разработки статичного сайта на Webpack5. Максимально упростил разработку: можно подключать встариваемы модули шаблонов для страниц (header/footer), использовать SASS с удобными миксинами, автоматически собирать SVG-спрайты для иконок. Для продакшна - минификация CSS/JS, удаление console.log и разделение кода на чанки для кэширования.

Ключевые части сборки: html-webpack-plugin генерирует HTML из src/html/views, raw-loader подтягивает include-фрагменты.

SCSS миксины для удобных медиа запросов, краткой их записи +r($md).

Автоматическая генерация SVG-sprite, svg-sprite-loader собирает все src/icons/*.svg в inline-спрайт — иконки затем вставляются в шаблоны через .

Пользователи ненавидят спиннеры. Они хотят видеть лайк сразу после клика. Optimistic UI решает эту проблему, но создает новую: что делать, если сервер вернет ошибку?

В императивном коде (Promise/async-await) откат состояния превращается в ад из try/catch и ручных мутаций переменных, порождая Race Conditions.

В этой статье я покажу, как реализовать надежный паттерн Compensating Transaction на чистом RxJS. Мы построим архитектуру, где состояние это поток, который невозможно "сломать" частыми кликами или сетевыми сбоями. Никаких if/else, только чистые потоки.

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

Недавно команда TypeScript представила TypeScript 7 — новую версию, переписанную на Go. Главные обещания: до 10× ускорения компиляции и до 8× более быстрый старт анализа проекта. Но самое интересное спрятано чуть глубже: вместе с TS-Go появляется полноценный LSP-сервер, встроенный прямо в компилятор.

Для многих IDE это шаг вперёд.
Для нас, команды OpenIDE, — это ещё и освобождение от ограничений, с которыми TypeScript приходилось поддерживать долгие годы.

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

Меня зовут Артём. Я — fullstack-разработчик уровня Middle, работаю с проектами на Python, JavaScript, Golang, Rust. В этой статье хочу рассказать о том, как я, подсмотрев западное приложение Kahoot, решил с нуля разработать собственную платформу для интерактивного обучения с огромным количеством ИИ-функций.

По последним данным статистики (данные W3Techs за 2025 год), в настоящий момент 43,1% сайтов в интернете работают на CMS Wordpress. Это самая массовая система управления содержимым. Этот факт автоматически делает эту CMS приоритетной целью для злоумышленников: широкое использование CMS дает возможности для массовых воспроизводимых атак при обнаружении любой уязвимости. 

По статистике Wordfence за 2024 год, количество обнаруженных уязвимостей в плагинах и темах выросло на 68% год к году. Причём Wordfence фиксирует, что значимая доля уязвимостей длительное время остаётся непропатченной — в том числе из-за заброшенных расширений, которые администраторы нередко продолжают держать активными.

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

Под катом мы поговорим о WPScan — инструменте, которому, на мой взгляд, уделено незаслуженно мало внимания на Хабре — всего две статьи за все время, да еще в трёх-четырёх этот инструмент упоминается вскользь. Помимо освещения практического использования самого сканера, мы разберём куда более фундаментальные вопросы: как обстоит вопрос с уязвимостями в WP и как вообще строить процесс управления уязвимостями.