Веб-разработка *

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

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

По моим ощущениям, сейчас их стало меньше. Все ушли в YouTube, а теперь в ChatGPT. Но мне этот формат не подходит, поэтому я пришёл сюда, к вам.

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

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

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

Помните момент, когда сервис работал нормально, но после рассылки, рекламной кампании или наплыва пользователей начал тормозить? В такие секунды и выясняется, что без нагрузочного тестирования команда на самом деле не знает, где у системы потолок, как проседает производительность и в какой точке критично растёт время отклика. Хорошо настроенное нагрузочное тестирование на Python помогает опираться на цифры: сколько запросов выдерживает API, как ведут себя ключевые бизнес-сценарии и когда инфраструктура начинает деградировать.

Меня зовут Арсений, мне 15 лет. У меня 99 пользователей, более 100 SQL‑миграций и приложение на Android и Windows. И, что не менее важно, — команда единомышленников и поддержка тех, кто верил в проект с самого начала.

Если вам интересно попробовать — заходите на агора.com.

Привет!

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

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

📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра.

🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах.

🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод.

🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку.

⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений.

🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса.

…и многое другое.

Или как дизайнеру продукта решать проблемы бизнеса и причём тут заводы с конвейерами.

Представь, к тебе пришли с задачей: в приложении низкие показатели активации пробной подписки. Пользователи скачивают приложение, но мало кто начинает триал. Тебя просят сделать что-то с онбордингом, ведь именно там последняя возможность донести ценность.

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

Привет я продуктовый дизайнер в Альфа-Инвестициях, хочу поделиться знаниями о фундаментальной вещи, которая лежит в основе продуктового дизайна и гораздо важнее навыков UI, ведь кто будет пользоваться вашей красотой, если пользователь не видит ценности всего продукта в целом? Обо всём по порядку.

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

Полтора года назад мои знания в разработке находились на отметке 0.00. Кто‑то из вас, возможно, помнит мою историю: я начинал учить HTML и CSS, выписывая теги ручкой в тетрадь, потому что у меня не было не ноутбука не компьютера.

Я всё ещё иду по следам программирования, но недавно я сделал важный шаг — всего за 1 месяц я собрал и выкатил свой первый продукт: FocusMind (локальный рабочий хаб с Pomodoro, задачами и заметками).

Оглядываясь на эти полтора года и этот безумный месяц разработки, я сформулировал для себя мысль, которая идеально описывает путь любого начинающего разработчика:

Предыстория тут.

Возвращение началось с осознания, что мир IT уже не тот, каким я его помню. Хотя бы потому что работодатель понял, что программист не равно администратор сети и/или СУБД, тем более не просто «компьютерщик» на все руки.

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

Но в ряде случаев нужны аналоги Vercel. Особенно в России, где сайты на Vercel недоступны для многих пользователей с мобильного интернета из-за региональных ограничений. Да и не у всех есть возможность оплачивать платные тарифы долларовой картой.

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

Привет всем.

Расскажу про свой личный опыт разработки через Qwen 3.6 Plus и Qwen ClI. И да, статья полностью написана человеком.

Это небольшой pet-проект, сделанный в момент, когда Qwen 3.6 Plus был бесплатным с лимитом в 1000 запросов в день. Проект представляет из себя фронтенд вымышленного интернет-магазина по продаже микрокомпьютеров.

Цель была протестировать возможности Qwen. На весь проект у меня ушло 4 дня по 2-3 часа.

Онлайн доска DGRM.net хранит данные в PNG-картинках. Вместе с вложениями файлы получаются большие. Рассказываю как сделано хранение данных в PNG-файлах.

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

Смотреть на то, как твой вылизанный бандл грузится рывками из-за отваливающихся узлов связи, больше нет сил. Все эти бесконечные битвы за 100/100 в Google PageSpeed, микро-оптимизации LCP и внедрение Edge-кэширования теряют смысл, когда пакеты просто не доходят до адресата.

И в какой-то момент я осознал простую истину: если ты не можешь остановить глобальную деградацию веба — возглавь её.

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

Встречайте: Шакализатор сайтов 3000.

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

Привет, меня зовут Рамиль Габдрахманов, я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу видеоплатформу используют многие сервисы Яндекса: Кинопоиск, Яндекс Маркет, Яндекс Музыка и другие — а компании вне Яндекса могут использовать её через Yandex Cloud Video. В день наш плеер воспроизводит 103 847 867 931 секунду видео.

Сегодня расскажу о том, как устроены ленты коротких видео у нас, что под капотом и какие оптимизации мы применяем.

Intl API широко доступен (за исключением Intl.DurationFormat, который работает во всех современных браузерах, но существует недостаточно долго, чтобы считаться «широко доступным») и может удовлетворить почти все требования к форматированию непосредственно в браузере, без загрузки кода и без необходимости его парсинга. Он также учитывает языковые предпочтения пользователей, поэтому даты и числа можно форматировать так, как им удобно, без дополнительных усилий.

Изменения интерфейса мобильного приложения часто упираются не в сложность реализации, а в скорость релизного цикла: даже простые правки проходят через полный конвейер — разработку, рецензирование, сборку и публикацию. При высокой частоте изменений это увеличивает time-to-market, перегружает команду и делает быстрые итерации по интерфейсу практически невозможными.

Меня зовут Михаил Рыбочкин, я бэкенд-разработчик в компании GRI. Участвую в разработке и поддержке платформы для крупного ювелирного ритейлера. Я расскажу, как реализован Server-Driven UI для интернет-торговли с более чем 1000 розничных магазинов; как устроено управление конфигурацией интерфейса через Django Admin и как это позволяет менять интерфейс без релизов приложения; какие у этого подхода есть ограничения и какой инцидент произошёл в эксплуатации. Особенность нашего подхода в том, что SDUI одновременно обслуживает и нативные мобильные приложения, и веб на Vue. Один конфиг, один API, две целевых платформы

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

Разработчики сталкиваются с выбором: использовать CSS Modules или CSS-in-JS решения. Эти подходы дают изоляцию стилей и интеграцию с компонентами, но различаются по реализации и ограничениям.

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

Данная статья не ставит цель назвать одного победителя. Вместо этого мы сравним основные подходы - CSS Modules и CSS-in-JS. 

Я устал каждый раз гуглить одно и то же в nginx — и сделал инструмент, который объясняет конфиги на русском

Очередной генератор nginx-конфигов? Нет. Ну, почти нет.

Использование ИИ в разработке давно вышло за рамки генерации простых функций. Для крупного финтеха это вопрос системной интеграции и безопасности. В ИТ-кластере «СВОЙ Тех» мы постоянно ищем способы оптимизации Time-to-Market. В этом материале мы делимся опытом того, как заставить нейросети работать с легаси-кодом, зачем им доступ к Figma через MCP-протокол и почему будущее за Spec Driven Development.

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

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

А сегодня посмотрим, как с помощью Coolify создать базу данных на своем сервере и какие преимущества это даёт.

Всем привет! Меня зовут Евгений Оселедец, я ведущий разработчик в компании Axenix. В этой статье расскажу, как мы упаковали React и Java в единое автономное desktop-приложение с помощью Electron для Windows, Linux и macOS — без Docker, без предустановленной Java у пользователя и без необходимости интернет-соединения. Расскажу, с какими техническими вызовами мы столкнулись и какие решения сработали на практике.

В рамках данной статьи рассказываю об очередных нововведениях в законодательстве о персональных данных.

С 30 мая 2025 вступил в силу Федеральный закон от 30.11.2024 № 420-ФЗ «О внесении изменений в КоАП РФ», пунктом 10 которого установлена ответственность за невыполнение или несвоевременное выполнение оператором персональных данных обязанности по уведомлению уполномоченного органа по защите прав субъектов персональных данных о намерении осуществлять обработку персональных данных.

А теперь перевожу с юридического на человеческий все важные нюансы указанного нововведения ↓