Обновить
256K+

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

Делаем веб лучше

336,16
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Как Let's Encrypt, только роднее: автоматическое получение бесплатного RSA DV-сертификата НУЦ

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели14K

DV-сертификаты НУЦ можно получить как с портала ЕПГУ, так и с помощью acme.sh по инструкции.
Информация опубликована командой НУЦ ещё в январе.
Используется модифицированная версия acme.sh v.3.1.2, позволяющая не только выпустить сертификат, но и настроить cron для автоматического обновления.
Очень удобно и работает!

Читать далее

Мой опыт запуска продукта на Product Hunt

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели6.7K

Привет, коллеги! Хотел бы поделиться с вами своим опытом запуска моего расширения для браузера Mobile View, которое позволяет проверять адаптив непосредственно поверх десктопа, на такой площадке, как Product Hunt. Ссылки на приложение оставлять не буду — это не реклама, а скорее пост на подумать и обменяться опытом взаимодействия с этой платформой.

Читать далее

Конец бесплатного PrimeNG, PrimeReact и PrimeVue? Разбираемся, что задумала PrimeTek

Время на прочтение4 мин
Охват и читатели7.7K

PrimeTek, бывшая PrimeFaces, запустила PrimeUI — новую лицензионную модель для экосистемы PrimeNG, PrimeReact и PrimeVue. Это подаётся как унификация бренда, но по сути компания собирает свои ключевые продукты под одной коммерческой оболочкой. Раньше они существовали как набор отдельных библиотек, которые монетизировались через дополнительные продукты и сервисы. Теперь вся экосистема превращается в единый лицензируемый актив.

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

Читать далее

Многоэтапные сборки в Docker: как уменьшить образ с 1,2 ГБ до 50 МБ

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели18K

Знакомая картина: вы написали микросервис, набросали Dockerfile из четырёх команд — и получили образ на 1,2 ГБ. В единичном случае не страшно, но этот гигабайт гоняется по сети десятки раз в день: при каждом коммите в CI, на preview-окружениях, при деплое в кластеры. В итоге — минуты ожидания пайплайнов, счета за трафик и хранение, плюс лишние системные пакеты с десятками CVE. Показываем на Node.js и Go, как ужать образ с 1,2 ГБ до 50 МБ через multi-stage — без единой строчки правок в коде.

Раскатать без боли →

Django-кнопка «Наверх»: подключить за минуту вместо очередного велосипеда

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели12K

Кнопка «Наверх» — вещь настолько простая, что обычно её делают прямо в проекте: ссылка, немного CSS, пара строк JavaScript — готово.

Для одной страницы это нормально. Но потом проект растёт. Появляется мобильная версия, cookie-баннер, чат в углу, требования к контрасту, строгий CSP. Где-то нужно добавить кнопку ещё и в Django Admin. И тот самый маленький кусок кода начинает жить своей жизнью.

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

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

Так появился django-scroll-to-top.

Читать далее

Два способа создания доступного DatePicker'а с помощью AI: 80/20 в пользу AI или системное проектирование с агентом

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели11K

DatePicker казался нам небольшой задачей в разработке UI, пока мы не попробовали создать компонент, который будет корректно работать с keyboard navigation, screen reader’ом, управляемым состоянием и реальными проверками доступности.

Нам потребовался DatePicker производственного уровня на React и TypeScript, и сначала очевидный путь казался очень заманчивым: дать AI четкий запрос, получить 80% готового кода, а остальное доработать руками. Подробный разбор этого кейса есть в моей предыдущей статье «Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки».

Так вот.

Модель может сгенерировать структуру календаря, атрибуты ARIA, базовую keyboard navigation и логику работы с датами.

Затем начинается интеграция: поведение фокуса становится нестабильным; возникают конфликты между обработчиками событий; озвучивание screen reader’ами требует тщательного тестирования; небольшое изменение в логике работы с датами может неожиданно нарушить работу календаря; код выглядит нормально, но компонент пока не является надежным.

В этой статье я сравниваю два способа создания доступного DatePicker'а с помощью AI:

Первый — 80% кода с помощью AI, остальные 20% руками. Второй — системное проектирование с AI-агентом: PRD, декомпозиция задач, правила агента, внешняя верификация, Vitest, Playwright, сборка Vite, проверки типов и строгий цикл, в котором агент не может двигаться дальше, пока не будет пройден текущий шаг.

Дальше все по делу: в чем AI действительно нам помог; где он начал сбиваться с курса; почему одного большого promt'а оказалось недостаточно; как The Verifier изменил процесс и почему основная задача инженера в разработке с использованием AI больше не сводится только к написанию кода, а заключается в контроле над замыслом, архитектурой, контрактами и стоимостью изменений.

Читать далее

Почему Google не индексирует страницы, хотя технически всё в порядке

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели10K

У меня есть сайт на Next.js. Часть страниц индексируется почти сразу. Часть застряла в статусе «Обнаружено, не проиндексировано» уже две недели. Самое неприятное в том что все страницы технически одинаковые. Тот же фреймворк, тот же сервер, тот же sitemap.

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

Читать разбор

12 факторов хорошего агента

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели9.5K

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

Читать далее

Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели10K

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

Нам понадобился настраиваемый DatePicker на React для процесса записи на прием к врачу, где пользователи, работающие с keyboard navigation, и люди, использующие screen reader’ы, должны были выбрать дату без лишних затруднений.

Claude сделал нам хорошую первую версию: структуру компонента, ARIA-атрибуты, базовую keyboard navigation и логику календаря. На первый взгляд результат выглядел почти готовым.

Затем мы запустили NVDA, VoiceOver и протестировали сценарий keyboard navigation.

Фокус выходил за пределы диалогового окна; некоторые даты озвучивались неверно; переключение между месяцами сопровождалось слишком тихим звуком; нажатие клавиши «Esc» закрывало календарь, но оставляло пользователя без контекста; режим высокой контрастности Windows нарушал отображение выбранного состояния.

Код выглядел нормально, но UX оставлял желать лучшего.

В этой статье мы рассмотрим реальную работу, стоящую за WCAG-доступным DatePicker'ом: где AI сэкономил нам время; где он не справился; как нам помог WAI-ARIA APG; какие детали нам пришлось исправлять вручную и почему доступность нельзя проверить, просто прочитав сгенерированный код.

Приготовьтесь к инсайтам, багам и победам!

Читать далее

Анти‑кейс. Как создать технически идеальный сайт на Next.js про ИИ и нейросети и остаться без поискового трафика

Время на прочтение5 мин
Охват и читатели8.9K

Привет, Хабр! Меня зовут Борис, я инди‑хакер и разработчик. Обычно я пилю Telegram‑ботов и настраиваю автоматизации, но чуть менее года назад меня затянула идея создать собственный большой, удобный и, главное, полностью авторский веб‑проект в тематике ИИ — Нейро.PRO.

Я сразу решил, что не буду использовать никакие конструкторы, шаблоны из 2010х и унылые рерайтов. Всё пишем руками (с помощью ИИ‑шки конечно же), вылизываем UX и делаем упор на пользу для людей.

Читать далее

Как генератор палитр дорос до конструктора бренда: один ИИ-эндпоинт, дырявая ссылка и грабли деплоя

Время на прочтение9 мин
Охват и читатели9.7K

Несколько дней назад я сделал маленький инструмент для себя. Надоело каждый раз начинать новый проект с колеса оттенков: крутишь Coolors, листаешь Pinterest, смотришь на чужие палитры, которые «почти подходят». А ведь у проекта уже есть образ, это слово. Рассвет. Шторм. Тёмный лес. У каждого слова есть свой цвет, который чувствуешь интуитивно. Просто никто не переводит его в HEX за тебя.

Так появился Колорит: вводишь слово, ИИ собирает палитру. Я написал про него на Хабре. А потом поймал себя на новой мысли. Палитра это ведь только начало. После цвета всё равно нужно имя, слоган, шрифты, ощущение движения. Почему всё это должно начинаться с нуля, если отправная точка одна и та же?

Так Колорит перестал быть просто генератором палитр и стал маленьким конструктором бренда.

Читать далее

Как превратить ChatGPT.com в Codex (но без лимитов)

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели25K

Codex это прекрасно, но лимиты все меньше, а цена все выше. Но ведь под капотом просто gpt-5.5(вот промпт)?

Один диалог слева пишет код, справа другой проверял результат, третий держал контекст, а я в это время мог накидать очередь следующих шагов и уйти пить чай. Если задача закончилась — пусть прилетит сообщение в Telegram.

Так появился экспериментальный Chrome-плагин ChatGPT Multi Pane: GitHub

Читать далее

FM-синтез звука в браузере. Часть 1

Уровень сложностиСложный
Время на прочтение8 мин
Охват и читатели13K

Рассмотрим возможности браузеров по синтезу звука. Разберём основы и в качестве практического применения сделаем эмулятор синтезатора Yamaha DX7.

Читать далее

Ближайшие события

Python: интересные развлечения со змеей

Уровень сложностиСредний
Время на прочтение15 мин
Охват и читатели16K

На этот раз у нас известный язык программирования Python, c двумя стилизованными змеями на логотипе, интересные и необычные развлечения с которым были собраны в этой замечательной статье.

Читать далее

Django-style фильтры поверх SQLAlchemy: зачем я написал python пакет sqlalchemy-query-manager

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели11K

TL;DR: я сделал sqlalchemy-query-manager — небольшой слой поверх SQLAlchemy для типовых backend-запросов. Он не заменяет SQLAlchemy, а добавляет более компактную запись для частых операций: фильтры в стиле number__gte=100, условия через Q, фильтрацию по связанным моделям, eager loading, CRUD helpers, агрегаты и просмотр итогового SQL. Идея в том, чтобы оставить SQLAlchemy в основе, но убрать повторяющийся код там, где запросы становятся слишком большими.

Читать далее

Дизайн-система Kite: путь от «порядка» к «воздушному змею»

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели9K

Привет! Меня зовут Рома. С 2023 года я отвечаю за технику и архитектуру дизайн-системы в Туту, а с 2025 — возглавляю саму команду. 

За это время я понял: дизайн-система — это сложный и местами болезненный компромисс между кодом, дизайном и бизнесом. Написать гибкие компоненты и собрать UI-кит — лишь 20% успеха. Остальные 80% — это долгие детальные переговоры и поиск точек соприкосновения. Продуктовые команды тоже хотят делать качественный продукт, но их главный ресурс — время.

Полетели!

Agentic Browsing в Lighthouse: четыре проверки, pass ratio 0/3 и что чинить до llms.txt

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели6.8K

До сих пор сайты делали для людей: чтобы человек зашёл, посмотрел глазами, нажал кнопку. Но всё чаще на страницы заходят не люди, а ИИ-агенты — боты, которые сами читают сайт и действуют за пользователя: ищут товар, сравнивают, оформляют заказ, записывают на приём. И тут выясняется неприятное: то, что очевидно человеку, агент часто «не видит» — кнопка без подписи, всплывашка про cookie без названия, прыгающая при загрузке вёрстка. Google решил это измерять и встроил в свой бесплатный инструмент проверки сайтов (Lighthouse / PageSpeed Insights) новый раздел — Agentic Browsing. Он отвечает на один вопрос: готов ли ваш сайт к тому, что им будет пользоваться не человек, а ИИ-агент? Многие уже наткнулись на красное «0/3» в этом разделе и заподозрили, что с сайтом что-то серьёзно не так. Спойлер: чаще всего нет — это две-три мелкие и давно знакомые недоработки. Ниже разберём, что именно проверяется, чего пугаться не стоит и что реально стоит починить.

В Lighthouse 13.3 появился Agentic Browsing — pass/fail вместо 0–100. Четыре проверки, отличие от Search Console и что чинить до llms.txt.

Читать далее

Я портировал культовый шутер Chasm: The Rift в браузер, на это раз полностью с помощью ИИ

Уровень сложностиПростой
Время на прочтение1 мин
Охват и читатели7.5K

В общем и целом это практически полностью ИИ порт на создание которого ушло всего 10 минут!Так я решил проверить готова ли самая обычная нейронка портировать с нуля игру в браузер, так сказать под ключ.

Читать далее

Безопасное хранение паролей: соли, перцы и выбор алгоритма

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели8.2K

Выбираете алгоритм хеширования паролей — берёте bcrypt, потому что все берут bcrypt, ставите rounds=10, потому что так в туториале, и идёте дальше. Разбираем, почему это может быть ошибкой, чем отличаются Argon2, scrypt и PBKDF2, и как правильно настроить каждый из них.

Читать далее

Headless CMS, или движки без руководящего компонента

Уровень сложностиПростой
Время на прочтение19 мин
Охват и читатели8.2K

В 1865 году британский журналист Томас Майн Рид написал роман "Всадник без головы", который послужит нам отправной точкой в вопросе о том, что же такое "безголовая" CMS и какие из них представлены сейчас на рынке веб-разработки.

Давайте разбираться