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

В конце статьи Python скрипт для сохранения заметок.

Последняя шлюпка с «Титаника», чтобы утащить с ЖЖ свои и чужие мысли на жесткий диск, пока «эффективные менеджеры» окончательно не пустили всё на дно.

Я писал свои заметки в ЖЖ более 15 лет. Полтора десятилетия текстов, некоторые из которых даже влетали в топ главной страницы, теша мое самолюбие. Но всему есть предел.

Декабрьские конвульсии администрации — введение сегрегации пользователей, разделение на касты и монетизация каждого вздоха — стали последней каплей. Это больше не дом, это режимный объект с пропусками. Я принял решение об уходе, забирая с собой всё, что нажил непосильной графоманией.

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

Современный CSS позволяет собрать сложный, гибкий и красивый круговой прогрессбар буквально на одном div и на одном CSS-свойстве. И всё это — с отличной браузерной поддержкой.

В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS-логику. Да-да, напоследок мы немного попрограммируем на CSS!

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

В этой статье пойдёт речь о нескольких косметических действиях, которые, с одной стороны, почти не затрагивают логику программы и не вызывают ненависти у тестировщиков, а с другой — делают код чуть приятнее и дают темы для обсуждения на бэкенд‑созвонах. Мы разложим импорты, перенесём логику из роутов в контроллеры, а из контроллеров — в репозитории и сервисы, избавимся от requirements.txt в пользу нормального менеджера зависимостей и включим mypy.

Привет, друзья!

В этой небольшой статье мы вместе с вами немного пощупаем новый Web API - Anchor Positioning.

Anchor Positioning API предоставляет новые возможности для связывания элементов между собой. Одни элементы являются якорями (якорными, anchor elements), другие - позиционируемыми относительно якорей (закрепленными, anchor-positioned elements). Размер и положение позиционируемого элемента может определяться размером и положением якорного элемента.

Кроме того, с помощью CSS можно:

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

определять условия видимости закрепленного элемента, например, скрывать такой элемент при выходе за пределы экрана

На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

Представьте: вы пишете "перезапусти продакшн-сервер" в Telegram, и система не просто понимает запрос — она знает, какой именно у вас сервер, что на нём запущено, кто будет затронут простоем, и предлагает конкретный план действий. Без панелей управления, без SSH, без поиска в документации.

Это не шизофреническая фантазия. Это ICNLI (Infrastructure Contextual Natural Language Interface) — открытый стандарт, который мы разработали и уже внедрили в production на десятки серверов.

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

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

правильное создание Blob

разбивка больших файлов на части (chunks)

сжатие и конвертация изображений

реализация надежных превью файлов

экспорт данных в виде загружаемых файлов

управление памятью во избежание утечек Blob URL

Цель руководства — сделать работу с файлами быстрой, стабильной и готовой к продакшну.

Привет! Меня зовут Дима, я продуктовый дизайнер. Мой путь в IT оказался связан с постоянной гонкой за релизами фичей. Я успел поработать в разных проектах—от небольших агентств и стартапов до бигтеха (и, как итог, сильно выгорел). В какой-то момент я решил попробовать себя в создании настольной игры. 

Представьте: релиз висит на волоске, баги лезут изо всех щелей, легаси тормозит, а решения превращаются в костыли — все это легло в основу идеи карточной игры «Release любой ценой».

В «Release любой ценой» ты становишься релиз-менеджером и собираешь релиз из Backend, Frontend и Database. Твоя цель — зарелизить первым “любой ценой”: саботировать соперников багами и защищать свой релиз. Конечно, в игре есть AI — куда же без него в наше время—в виде дополнительной колоды случайных событий.  Если тебе кажется, что у тебя все под контролем, всегда можно вытащить из колоды Error 503, который выбьет тебя из игры. Победи, собрав все карты релиза, или останься последним выжившим.

PnP выложил на GitHub.

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

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

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

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

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

Привет, Хаброчане!

Если вы думаете, что Chrome DevTools нужны только для того, чтобы посмотреть на ошибку в консоли или скопировать путь к элементу, вы используете лишь малую часть их возможностей. На самом деле, это рабочая среда, которая должна быть открыта у фронтенд-разработчика постоянно. С её помощью можно не только искать баги, но и проектировать интерфейсы, тестировать поведение на разных устройствах, анализировать производительность и вносить правки в код прямо из браузера.

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

У вас есть GitHub ? Ставите Stars ?
Используя эту информацию можно многое про вас рассказать.

В статье вы прочитаете как обучить эмбединги для 300к GitHub репозиториев и как их можно подгрузить прямо в браузере используя WASM для создания рекомендаций.

Привет, я Александр Дудукало, фронтенд-разработчик. Сегодня я расскажу об обработчиках событий. Если коротко, вы узнаете о самом удобном способе управлять откликом на действия пользователя или браузера. 

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

Это было интересное приключение.

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

Это мой первый публичный проект в формате “сделал сам и показываю миру”, без команды и заказа. Ниже расскажу, почему мне захотелось написать такой сервис, как он устроен на уровне идеи и в каких сценариях реально экономит время.

Буду благодарен за конструктивную критику — особенно за идеи, которые помогут сделать инструмент полезнее.

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

Когда речь заходит об open source, многие сразу думают: «Это для энтузиастов».
Контрибьют в Open Source это способ расти как разработчик, завести полезные связи и заявить о себе.

Разбираемся, как найти свой проект, использовать AI для чтения кода и сделать первый контрибьют без боли!

Всем привет! В этой статье я собрал практические фишки работы с Telegram Mini App: что здесь реально проще, чем в обычном вебе, какие возможности Telegram дает из коробки, и что чаще всего вызывает затруднения при разработке.

3 декабря 2025 года критическая уязвимость в серверных компонентах React (React Server Components, RSC) потрясла сообщество веб-разработчиков. Была обнаружена уязвимость React2Shell/React4Shell (CVE-2025-55182) с оценкой CVSS 10.0, что является максимальным баллом для уязвимостей. Ошибка позволяет удаленно выполнять код (Remote Code Execution, RCE) на любом сервере, работающем с RSC. В течение нескольких часов после обнаружения уязвимости китайские государственные группы и криптомайнинговые компании начали взламывать уязвимые серверы.

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

Мы также обсудим, как защитить себя и как эта уязвимость подчеркивает важнейшие принципы безопасности.

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

В этой статье мы решили поделиться лучшими апдейтами и сайтами, заточенными под новогодние праздники и зимние развлечения. Давайте все вместе отдохнём, играя в «компьютерные игры» (ведь из-за игр мы и потянулись к разработке! Кто не делал своего питона или сокобан?), и устроим голосование за самые интересные новогодние активности онлайн!

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

История о том, как я перешёл от просмотра вакансий к реальному проекту. Сделал простой веб-чат на React + TypeScript и FastAPI, задеплоил на Vercel и Render, и столкнулся со всеми классическими проблемами начинающего разработчика: Git-хаос, CORS-ошибки, забытые коммиты и node_modules в репозитории.

В статье - честный рассказ про мой первый пет-проект: выбор стека, структуру проекта, работу с REST API, настройку деплоя и документацию. Без приукрашиваний, с реальными граблями и ощущением победы, когда всё наконец заработало.

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы.

Эту статью можно отчасти считать продолжением моей предыдущей, по данной теме, хотя напрямую они не связанны. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.

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

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

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

Давайте уже сделаем новогоднюю открытку!