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

Здравствуйте, уважаемые читатели.

Рады предложить вам одну из самых долгожданных новинок на тему современной веб-разработки - книгу уважаемого Александра Гусева @flancer "Браузер как операционная система для разработки современных приложений". Ниже предлагаем обзорный материал, в котором автор рассказывает о концепции книги, роли больших языковых моделей в современной веб-разработке, об истинных возможностях браузера как рабочего инструмента и о системном понимании Интернета.

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

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

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

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

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

Уже более 10 лет мы сопровождаем Единый официальный сайт органов власти Ханты-Мансийского автономного округа — Югры (admhmao.ru, далее – сайт), в структуру которого входят ещё 36 сайтов органов власти округа. За это время требования к доступности государственных сайтов несколько раз менялись.

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

Optimistic update меняет клиентское состояние до ответа сервера. Autosave отправляет новую версию после паузы во вводе. До завершения action в приложении одновременно существуют локальные данные, запрос в работе и последняя подтверждённая версия на сервере.

При optimistic create клиент может показать сущность с временным id, а сервер вернуть другой id. Ошибка после частичной записи оставляет сущность на сервере и запускает локальный rollback. При autosave ответы приходят не в порядке отправки. Старый ответ меняет статус уже после сохранения новой версии. updatedAt может перейти вперёд до завершения записи.

В учебном проекте Workbench optimistic create использует clientId для одинакового id на клиенте и сервере. Autosave-демо передаёт requestId в каждый запрос. Редактор хранит статусы saving, saved и error отдельно от текста заметки.

Текст написан по мотивам интервью с Дмитрием Бусовым, CEO проекта LeaderChat.

Разбираю историю LeaderChat — сервиса, который начинался как обычный онлайн-чат с живыми операторами, а после появления современных LLM-моделей полностью изменил подход к работе. Спойлер: главным изменением стало даже не внедрение ИИ, а полный пересмотр того, как вообще должна работать автоматизация общения с клиентами.

На первый взгляд, Social Login — одна из самых простых функций современного веб-приложения.

Добавить кнопку «Войти через VK». Добавить кнопку «Войти через Яндекс». OAuth 2.0 давно стандартизирован, OpenID Connect тоже. Документации и библиотек полно. Да и AI сегодня умеет писать интеграции быстрее человека. Поэтому, когда я решил добавить VK ID и Яндекс ID в Авторизу, честно рассчитывал уложиться в один рабочий день:

Свою систему знаю. OIDC знаю. Подобные интеграции раньше проектировал. Под рукой ChatGPT, Claude и AI-агенты.

Что вообще может пойти не так?

Спойлер: получилось почти три дня. И самой сложной частью оказался не OAuth.

День первый. Самоуверенность

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

До общих досок бот уже умел личные заметки и задачи. Пользователь заходит, пишет заметку, ставит задачу с чекбоксом — всё как в обычном блокноте, только внутри Telegram.

OWASP, лаборатории, CVE, инструменты и патчи обычно живут в разных местах. Каждый раз собирать этот маршрут заново утомительно, поэтому и сделал RØØT — автономный полигон, который связывает всё в один процесс:

понять → проверить → доказать → исправить → перепроверить

Вместо запросов, которые вызываются из JavaScript, <usermedia> предлагает декларативный подход, при котором действие инициирует сам пользователь. Это позволяет сократить объём шаблонного кода, повысить безопасность и упростить повторный запрос доступа для пользователей, которые ранее его запретили. Тем самым элемент решает давнюю проблему, связанную с восстановлением отклонённых разрешений.

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

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

Сначала списал на случайные глюки у провайдеров. Мало ли, бывает. Но обращений становилось больше, а не меньше, и в какой-то момент стало ясно: это не совпадение, это системная штука. Пришлось лезть в сетевой дебаг с головой.

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

localStorage существует только в браузере. App Router может подготовить HTML на сервере и для Client Component. Код с директивой use client получает состояние, эффекты и обработчики событий, но первый рендер всё ещё может пройти без window и localStorage. И возникают два сбоя. Прямое чтение localStorage падает на сервере. Проверка через typeof window возвращает разные данные на сервере и в браузере. Сервер строит пустое избранное, браузер видит сохранённые id, React получает разные деревья при hydration.

JS — однопоточный язык, но асинхронный код нередко описывают как «выполняющийся параллельно» — и это не совсем так. В статье разберёмся, что на самом деле происходит, когда вы вызываете fetch или setTimeout, и почему настоящая многопоточность в браузере — это отдельная история про Web Workers, а не про промисы.

Я фрилансер, и я ненавижу мониторить биржи. FL, Kwork, Freelance, куча Telegram‑каналов — каждое утро одна и та же рутина. Открываешь вкладку, обновляешь, листаешь, понимаешь что всё мимо, переходишь на следующую. Короче, бесконечная петля.

Подсчитал как‑то — два‑три часа в день уходит не на работу. На обновление страниц.

Решил автоматизировать. Написал агрегатор, который собирает заказы с четырёх площадок в единую ленту с фильтрами, присылает уведомления в Telegram и пересылает ответы заказчиков из бирж прямо в чат. Под капотом Python 3.13, FastAPI, Vue 3, PostgreSQL. Всё крутится в одном asyncio event loop.

Разбираю, как мы два года пытались построить классическое приложение для знакомств, слили на это все деньги — а потом перестали конкурировать с Tinder и Badoo напрямую, урезали проект до одной узкой, но сильной идеи. Итог: больше 1000 активных пользователей каждый день, 7000+ в месяц — и мультиплатформенный продукт (iOS, Android, веб, Telegram).

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

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

Что лучше: ультрамногофункциональный швейцарский нож или скальпель?

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

Истории Calendly и Loom показывают совершенно другой путь.

Создаём одно приложение для портала Битрикс24 двумя способами: через внешний ИИ и через платформу вайб-кодинга Битрикс24 Вайбкод. 

На этом эксперименте покажем, почему платформа быстрее понимает CRM и требует меньше ручной настройки.

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

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

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

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

Добавить на страницу новые функции, не трогая саму страницу, звучит как противоречие. Но альтернативу мы посчитали командой: полное переписывание заняло бы год, в течение которого страница не получила бы ни одной новой функции. Мост между старым кодом и новым занял два месяца, и строил его уже я один. Расскажу, как этот мост устроен, почему получился несимметричным, где чуть не зациклился и что в нём так и осталось кривым.

Привет! Меня зовут Андрей Нелюбин, я руководитель функции фронтенд-разработки.
В рамках проекта для заказчика требовалось доработать сценарий работы колл-центра: связать телефонию на Asterisk с операторским интерфейсом, где рядом со звонком доступны данные клиента, заказы, статусы и действия управления.

Для этого в 2022 году была реализована собственная прослойка поверх Asterisk: backend на Python/Django, обработка событий через Django Channels, WebSocket для передачи изменений в интерфейс и frontend на Vue. В статье расскажу, как устроили архитектуру решения, как обрабатывали события звонков, зачем понадобился BFF-слой на Django и почему в рабочей конфигурации аудио осталось в SIP-клиенте, а контекст и управление — в операторском интерфейсе