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

Многие верстальщики используют Flex на автомате просто потому, что привыкли к нему за долгие годы. Grid часто кажется чем-то избыточным или пугающим из-за своего специфического синтаксиса. На самом деле эти инструменты не заменяют друг друга, а решают принципиально разные задачи.

Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.

В этой статье мы разберем конкретные ситуации, где один инструмент явно выигрывает у другого, чтобы вы перестали гадать и начали выбирать технологию осознанно. Для наглядности в наших примерах блоки Grid будут красными, а Flex — синие.

Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.

Если бы активное отвлечение читателей веб-сайта было олимпийской дисциплиной, то первые места в ней всегда бы занимали новостные источники.

Я зашёл на сайт New York Times, чтобы просмотреть четыре заголовка, но меня встретили 422 сетевых запроса и 49 мегабайт данных. Для полной загрузки страницы понадобилось две минуты. И потом они удивляются, что все мало-мальски владеющие технологиями люди с головой на плечах ставят блокировщики рекламы на компьютеры своих знакомых и родственников.

Эта история повторяется у всех популярных новостных изданий.

Чтобы осознать феномен веб-страницы весом 49 мегабайт, давайте вернёмся в прошлое на несколько десятков лет. Объём этой страницы превышает размер Windows 95 (28 дискет). Операционная система, когда-то управлявшая всем миром, с запасом уместится в современной странице. В 2006 году на пике популярности были iPod и цифровая музыка. Стандартная композиция в MP3 с высоким качеством и битрейтом 192 кбит/с весила примерно 4-5 МБ. Одна страница сегодня эквивалентна 10-12 песням. По сути, чтобы прочитать несколько параграфов текста, я скачал целый альбом. Согласно сведениям International Telecommunication Union, среднемировая скорость Интернета в те времена была примерно равна 1,5 Мбит/с. Пока браузер загружал бы этого бегемота, пользователь вполне бы мог успеть заварить себе чашечку кофе.

За последние двадцать лет оборудование совершило большой шаг вперёд; неужели современный стек фреймворков/рекламных технологий полностью обнулил этот прогресс «благодаря» абстрагированию и плохой архитектуре?

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

«Пакман, я сделал тебя. Ты такой голодный, я знаю. Не надо больше есть. Хороший мальчик» — актёр Денис Акияма (Тору Иватани).

И вот я подумал: а почему бы не попробовать самому создать Пакмена? Не такого кровожадного, конечно, а просто для души. Тем более что с «Тетрисом» получилось удачно, захотелось закрепить успех.

Всем привет! Меня зовут Саша. Я тимлид команды разработки личного кабинета пользователя в Банки.ру.

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

В статье разобрал, как можно подойти к этому иначе: использовать codemod и jscodeshift, чтобы автоматизировать такие изменения и применять их сразу ко всей кодовой базе. Как это работает через AST, и посмотрим на примере, как писать свои трансформации.

У каждого сервиса в Иви есть свои хранители. У веба — команда «Гамбит», которая делает так, чтобы сайт оставался тем самым местом, с которого начинается путь зрителя в мир контента. Они не просто пишут код, а выстраивают целую экосистему, где скорость, стабильность и забота о пользователе переплетаются с экспериментами, AI-инструментами и собственным мерчем. В этой статье Дмитрий Абраменко, технический менеджер платформы веб, приоткроет завесу тайн своего направления и расскажет больше о команде.

В прошлой статье мы сделали первое пробное фронтенд-приложение.

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

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

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

В 2025 году JavaScript исполнилось 30 лет — хороший повод попытаться объять необъятное разобраться, как он меняется и в каком направлении развивается. За три десятилетия язык переживал периоды скепсиса и бурного роста, обрастал экосистемой и стандартами, и в итоге вышел далеко за пределы браузера, охватив серверную и кросс‑платформенную разработку.

Всем привет! Меня зовут Владимир, я разработчик СберБанк Онлайн в канале «веб», и в этой статье я хотел бы затронуть этапы эволюции JavaScript, зафиксировать нововведения спецификации ECMAScript 2025, разобрать наиболее значимые предложения для будущих версий стандарта и попытаться понять его место в эпоху стремительного развития ИИ.

Случайно увидел результат работы функции RegExp.escape() и был удивлен, потому что она заэкранировала пробелы, все спецсимволы, а также цифры и латинские буквы в начале строки. До появления RegExp.escape() (а она стала доступна в популярных браузерах лишь в 2025 году) я, как и многие другие, писал аналогичную функцию сам, но без экранировки вышеперечисленных символов. Получается, что я ошибался, и нужно бросать все дела, рыться в старых исходниках и переписывать функцию? И да, и нет.

Очередной релиз фреймворка с акцентом на нативные AI-воркфлоу, дефолтная безопасность и более выразительные API. Основные нововведения: встроенные AI-инструменты, JSON:API ресурсы, семантический/векторный поиск, улучшения очередей и кэша. Обновление через AI.

Интернет-радио никуда не исчезло, оно просто ушло в сеть. В этом руководстве показываем, как за 15 минут поднять собственную радиостанцию на VPS с AzuraCast: загрузить музыку, настроить эфир, подключить домен и получить API для интеграций.

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

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

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

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

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

TL;DR

Мигрировал продакшн базу с Supabase на VPS PostgreSQL прямо на работающем проекте — без остановки, без потери данных. Заодно перенёс авторизацию через strangler-подход и убрал Supabase из SSR read-path. Расскажу три инженерных решения с кодом.

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

И я хочу обратиться к вам как профессионалам своего дела: А какие инструменты используете вы? Какие у вас возникают проблемы? Насколько быстро, дешево и просто вы их решаете?

Предыдущая статья

Продолжаем создавать сервис анонимных «мертвых ящиков» DeadDrop на чистом Go.

Во второй части (первый подвыпуск) закладываем фундамент: учимся принимать POST-запросы, загружать файлы с проверкой MIME-типа и размера, создаём in-memory хранилище с потокобезопасным доступом через RWMutex. Пишем утилиты для генерации криптостойких ID и паролей. Разбираемся с интерфейсами и готовим архитектуру к дальнейшему развитию.

Без фреймворков, только net/http и стандартная библиотека.

Грязные данные в CRM — это всегда дубли, ошибки в рассылках и «кривая» аналитика. В статье рассказываю, как я реализовал API для автоматической нормализации телефонов, email и имен на FastAPI, и почему простая проверка регулярками не заменяет систему оценки качества данных (QC).

Как меняется JavaScript?

JavaScript уникален тем, что работает во всех браузерах. У него нет какого-то одного «владельца», поэтому нельзя внести изолированное изменение и ждать, что оно будет применено везде. Эволюция происходит через TC39 — Технический комитет, отвечающий за ECMAScript.

Предложения должны пройти последовательность этапов развития:

• Этап 0: идея.

• Этап 1: принято пространство задач.

• Этап 2: выбрана архитектура драфта, но работа продолжится.

• Этап 2.7: предложение одобрено в принципе; ожидает тестирования и обратной связи.

• Этап 3: реализация и обратная связь.

• Этап 4: предложение стандартизовано.

В 2018 году, когда я впервые изучал Temporal, он находился на Этапе 1. Комитет TC39 был убеждён, что проблема реальна. Это было радикальное предложение по добавлению в JavaScript новой библиотеки дат и времени. Она должна была:

• Стать заменой Date.

• Добавить новые типы DateTime (вместо единого API).

• Стать неизменяемой.

• Добавить поддержку часовых поясов и календаря.

Но как мы к этому пришли? Почему Date вызывает столько проблем? Чтобы ответить на эти вопросы, нужно вернуться назад.

Чувак, уже есть Pinia, Pinia Colada, TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue?

Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар.

Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода.

И это возможно, покажу, как это работает на примере.

28 февраля 2026 года я стоял у окна на 41-м этаже в JBR в Дубае и смотрел, как системы ПВО ОАЭ перехватывают иранские беспилотники прямо над моей головой. Полез в новости — в Google и Яндексе статья двухчасовой давности, Telegram-каналы противоречат друг другу. Когда это происходит где-то далеко, не придаёшь этому значения. Когда ты в центре событий, то хочешь знать оперативную информацию, желательно с push-уведомлениями.

В марте 2023 я написал статью «ChatGPT: новый инструмент в борьбе с багами». Показал как нейросеть генерирует тест-кейсы, ищет XPath-локаторы и пишет SQL-запросы. 40 000+ просмотров. Первая статья на эту тему в рунете.

Ты сейчас подумал «ну и что, таких статей теперь тысячи». И ты прав. Но подожди.

За 3 года я прошёл путь от «вау, ChatGPT написал мне 10 тест-кейсов» до «я один собрал образовательную платформу за неделю». И это НЕ кликбейт.

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

Я не OpenSource разработчик, но за пару десятков лет написал под сотню enterprise-level библиотек, которые остаются в рабочем контуре, дорабатываются под каждый проект и адаптируются к новым технологиям. Большого смысла выходить в OSS не было, кроме как для упрощения обучения коллег и единого места хранения документации.

Но и желание помогать другим и делиться выстраданными подходами, экспертизой и конкретным кодом мне не чуждо - сегодня поможешь ты, завтра - тебе. Через полгода подготовки и адаптации к OpenSource (сам использую и дорабатываю около 8 лет) в свет выходит одна из библиотек моего рабочего контура - Reactive Route.

Так как я работаю с проектами на разных стеках, стараюсь писать код максимально framework-agnostic - независимыми слоями, которые можно заменить или переписать, не трогая остальной код проекта. А к фреймворкам и библиотекам для работы с состоянием они подключаются с помощью легковесных адаптеров, сохраняя синтаксис работы. Конкретно для Reactive Route выложил набор готовых адаптеров в комбинациях, которые сейчас чаще всего использую:

• React + MobX / Observable

• Preact (no compat) + MobX / Observable

• Solid.js + нативная реактивность / MobX / Observable

• Vue + нативная реактивность

В одном npm-пакете - строгая TS-типизация, SSR / MPA / no-JS / Widget режимы и тщательно протестированная отказоустойчивость. В статье не буду пересказывать документацию на русском и английском, а поговорю скорее про общие принципы качества, использование ИИ в разработке и почему многие библиотеки раздуваются, не успев даже стабилизировать ядро.