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

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

В этой небольшой статье мы вместе с вами немного пощупаем новый 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. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

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

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.

В этой статье я приведу несколько примеров; сможете придумать свои?

Я налоговый юрист и автор телеграм-канала «Налоговый Инсайдер». В моей работе есть рутинные задачи, которые сложно автоматизировать стандартными средствами вроде Excel. Одна из таких задач — расчет пени по НДС при подаче уточненной налоговой декларации.

В этой статье я расскажу, как не написав самостоятельно ни строчки кода с помощью Gemini и ChatGPT я прошел путь от идеи до работающего приложения на Flask , и с какими неочевидными техническими проблемами (вроде устаревшего Python на хостинге и CGI-скриптов) столкнулся гуманитарий-юрист пытаясь запустить современную программу на обычном хостинге.

Первая часть цикла «Разбираем net/http на практике»: создаём с нуля сервис DeadDrop — аналог Privnote для безопасной передачи самоуничтожающихся сообщений и файлов.

На чистой стандартной библиотеке net/http разбираем основы:

• запуск HTTP-сервера

• маршрутизация в ServeMux

• написание middleware (логирование и recovery от panic)

• работа с HTML-шаблонами и layout’ами

• подключение статики через http.FileServer и embed.FS

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

Идеально для начинающих и тех, кто хочет глубоко понять внутренности популярных фреймворков вроде Gin и Echo. Пишем код вместе!