Проект Android DEX позволяет запускать приложения с Android прямо на ПК. Например, можно открывать мобильные приложения в отдельных окнах, играть в шутеры с помощью мыши и клавиатуры и управлять смартфоном с большого монитора. Решение работает на ПК с Windows, macOS и Linux, а подключение осуществляется по USB или Wi‑Fi.
Делюсь опытом вайбкодинга Работа в Antigravity, Open Code, Windsurf
Сразу небольшая ремарка -
Всем ребятам которые когда-либо создавали сайт или приложение с помощью ИИ или агента, хочу сказать что опыт у всех разный , разные модели, взаимодействие, а также склад ума, мышления, понимая конечной цели и желаний, также различен, поэтому прошу не судить строго :)
Моё знакомство с искусственным интеллектом началось примерно в 2022 году, во время пандемии, когда много предприятий закрывалось и было скучно, особо не куда не выйдешь погулять или на природу, появился ChatGPT , я кинулся регаться в OpenAi , используя сервис виртуальных номеров той страны , какой включаешь ВПН, это получилось у меня только на 3 Гугл аккаунте Первые вопросы которые я ему задавал были простыми, но его ответы уже на тот момент мне казались пугающими. Тогда ещё можно было настроить прямо в чате температуру, где больше это значило модель может лгать, меньше или 0 модель всегда отвечала как есть.
В то время мне был очень интересен язык программирования javascript , и я кинулся его изучать, прошёл один бесплатный курс на стёпике и один платный, небольшой, на одной из известных площадок, по видео с Ютуба попробовал сделать мини-апп, но до конца это у меня не вышло, потому что замах был слишком большим, тогда я ещё не понимал что мини-апп этот - целая CRM, работающая на Sanity а не просто приложение. Всё что у меня получилось это 4 работающих страницы и возможность через crm добавлять блоки контента, понимая что наполнять их в одиночку, у меня не будет ни сил не времени, а также не было материальной мотивации, я это дело забросил на три года. У меня родился старший сын, были обычные бытовые заботы, в это время я мало следил за развитием ИИ , так как на тот момент мне казалось что нужно всё таки нужно больше гуглить, серфить stackoverflow, а хотелось максимум автоматизации из-за чувства что не хочу проводить свою жизнь за компьютером.
На тот момент я работал менеджером на ПВЗ Wildberries, по деньгам у меня выходило 5-6 тыс р. а в хорошие дни и 8-9, для моего небольшого города это отлично, с учётом графика 2/2
Но, я как любой другой отец задумался о будущем своего, тогда ещё одного ребёнка, хотел увеличить свой доход
А так как ИИ модели очень продвинулись, я недолго думаю кинулся создавать своё приложение 🐱.
Показывать свой гитхаб я не буду, так как там одни вайбкодинг приложения и нет ничего ценного, но хочу поделиться опытом и ошибками которые я совершал
Вообще ИИ уже очень сильно продвинулся, он мог предложить модули регистрации/авторизации через Гугл/firebase , Яндекс или ВК, или простую почту, также сделать простую метрику кто откуда зашёл, какой тариф купил и так далее, это было всё организованно через ТГ айди пользователя, которое синхронизировалось и при обычном создании аккаунта при регистрации через почту. Что я тогда понял при создании этого приложения?
А проблем была куча :
он мог постоянно генерить новые или менять куски функций, или блоки
если ему не объяснить про безопасность , sql, аудит и gitignore, а также МД файлы, он тупо пушил их кучей в гитхаб те инструкции которые ты ему писал
он хардкодил css
не правильно поставленная задача или промт часто приводила к переделке какого-либо участка кода
переключение на другую модель могло усугубить и добавить абракадабры в код
Итого: ИИ до сих пор не совершенен, и если даже даже мастера сеньоры ошибаются, то что говорить об ИИ?
Кому интересно - Продолжение будет в ч.2
Скролл без костылей — что уже умеет CSS
Для большинства сценариев прокрутки JavaScript вообще не нужен. CSS умеет сделать скролл внутри отдельного блока, горизонтальную ленту карточек, плавный переход по якорям, Scroll Snap и даже остановить ситуацию, когда после конца прокрутки модального окна внезапно начинает ехать вся страница.
Но обычно проблемы начинаются с нескольких базовых свойств. Вот что полезно знать:
Overflow — основа скроллинга. Если у контейнера ограничена высота, overflow: auto добавит прокрутку только тогда, когда контент перестанет помещаться. Через overflow-x и overflow-y можно отдельно управлять каждой осью.
Горизонтальный скролл удобен для карточек. Вместо уменьшения элементов или переноса на новую строку можно оставить фиксированную ширину карточек и разрешить контейнеру прокручиваться по оси X. Особенно полезно на мобильных интерфейсах.
Плавные переходы по якорям делаются одной строкой: scroll-behavior: smooth. Но есть нюанс с доступностью: если пользователь включил prefers-reduced-motion, плавную анимацию лучше отключить.
Scroll Snap может заменить простой JS-слайдер. scroll-snap-type и scroll-snap-align позволяют фиксировать карточку или секцию после прокрутки, а scroll-snap-stop: always — не перескакивать через элементы при быстром свайпе.
Фиксированный header не должен перекрывать якорь. Вместо дополнительных скриптов можно задать scroll-padding-top для страницы или scroll-margin-top для отдельных секций.
Вложенный скролл тоже можно контролировать. Если внутри страницы есть модальное окно или боковая панель, overscroll-behavior: contain не даст прокрутке после конца блока автоматически перейти на родительскую страницу.
Есть и менее очевидные детали. Например, scrollbar-gutter: stable помогает избавиться от горизонтального «прыжка» страницы при появлении полосы прокрутки, а кастомный scrollbar лучше не делать слишком узким или малоконтрастным — это уже влияет на доступность интерфейса.
JavaScript понадобится уже там, где скроллинг запускает дополнительную логику: Infinite Scroll с подгрузкой данных, синхронизацию нескольких областей, аналитику или сложные интерактивные сценарии. А вертикальный и горизонтальный скролл, Scroll Snap, плавные якоря и управление вложенной прокруткой вполне можно оставить браузеру.
Если хотите посмотреть готовые HTML/CSS-примеры и разобрать типичные ошибки, читайте полное руководство в блоге Рег.облака.
У коллег увидел интересный HTML трюк для значений в SELECT, который раньше не встречал.
Задача: сделать мульти-селект. Значения, которые влезут на текущем экране отображаем, а остальные указываем цифрой.
Первая мысль: нужно смотреть размеры элемента и родителя. Динамический высчитывать размеры и пытаться понять, влезет еще одно на экран или нет.
Решение коллег:
Выводим сразу штук 10 значений;
Каждому значению сразу пишем цифру, сколько элементов осталось после него;
Делаем всем отрицательный margin-left, чтобы они своим контейнером перекрыли цифру прошлого значения.
Никаких вычислений и перерасчетов при масштабировании и изменении размера экрана.
Начал значительно чаще пользоваться ChatGPT, так как на GPT-5.6 Sol High качество ответов стало меня устраивать. Вдобавок, он по умолчанию работает примерно в том же стиле, что и Perplexity Computer. Только нет никаких дурацких кредитов.
Единственное, что меня серьёзно напрягало – это то, как выглядел чат. Чёрный фон, полная депрессия. Поэтому сделал свою тему. Естественно, частично наследовал Base16 Dark и поставил любимое семейство IBM шрифтов.
Читаемость повысилась. С чатом стало приятнее работать. Кстати, предыдущую тему для Habr я тоже переработал.
Тема бесплатная, устанавливается через Stylus (Firefox / Chrome).
Хай, коллеги!
Около полутора месяцев назад, работая над задачей дообучения локальной модели ИИ, я наткнулся на Modern Web Guidance - сборник руководств (skills - навыков) по современной веб-разработке для агентов ИИ от команды Google Chrome. Ознакомившись со сборником, я понял, что большинство руководств человекам тоже не помешали бы😄 Так появился этот репозиторий. Основная работа над руководствами завершена. Любые исправления, замечания и предложения приветствуются. Пользуйтесь на здоровье и счастливого кодинга!
Хай, коллеги!
Около месяца назад, работая над задачей дообучения локальной модели ИИ, я наткнулся на Modern Web Guidance - сборник руководств (skills - навыков) по современной веб-разработке для агентов ИИ от команды Google Chrome. Ознакомившись со сборником, я понял, что большинство руководств человекам тоже не помешали бы😄 Так появился этот репозиторий. Большая часть руководств, выбранных мной для перевода и адаптации, уже готова. Любые исправления, замечания и предложения приветствуются. Пользуйтесь на здоровье и счастливого кодинга!
Кто такой UX/UI разработчик на практике?
Чем он занимается в реальной приземленной разработке?
P.S. делаю программу для завода и глазам больно от интерфейса
🌲 Открываем регистрацию на Дебаг Кемп
Мы придумали формат, который давно хотели сами: выбираешься из города, два дня в сосновом лесу на Карельском перешейке — маршрут, костёр, мастер-классы по выживанию, нетворкинг без слайдов и питчей. Просто люди, с которыми интересно, и никакого Slack-а.
📅 6–7 июня 2026 (выходные) 👥 Всего 25 мест — маленький формат, это принципиально.
Цена растёт по мере приближения к дате. Оплатить можно частями через сплит → регистрация
Если вы 💎 практик сообщества — скидка 15% применяется при регистрации автоматически. Ещё не практик, но думаете? Сейчас самый разумный момент.
👀 Узнать больше · 📝 Регистрация
Вопросы — в чат, мы там живём.
Cursor или Harvi Code: какой ИИ для кодинга в 2026 году реально работает в России без VPN и головной боли с платежами
В 2026 году почти каждый разработчик в России стоит перед одним и тем же выбором: хочешь мощный ИИ, который реально ускоряет разработку, или хочешь, чтобы всё работало просто, без посредников и ежемесячных нервов с оплатой.
Cursor — это сейчас, пожалуй, самый продвинутый AI-редактор на рынке. По сути, это VS Code, в который встроили настоящий искусственный интеллект на стероидах. Composer позволяет одной командой править сразу десяток файлов, агент понимает весь проект, хорошо справляется с рефакторингом, поиском багов и даже архитектурными решениями. Качество кода от Claude Sonnet 4.5 или свежих GPT часто вызывает искреннее «вау».
Но есть большая ложка дёгтя. Cursor — американский продукт, и российские карты он не принимает. Чтобы купить подписку Pro, приходится либо использовать виртуальные карты через крипту, либо платить посредникам (Oplatym и подобные), либо покупать готовые аккаунты (что рискованно). Сам редактор после оплаты работает без VPN, но первоначальная настройка оплаты — это отдельный квест. Бесплатная версия быстро упирается в лимиты, особенно если активно юзаешь мощные модели.
Harvi Code — Первый в России AI кодинг-агент. Российский ответ на все эти заморочки. Это полноценный AI-агент прямо внутри VS Code. Пишешь задачу в чате — он генерит код, рефакторит, фиксит баги, работает с контекстом всего проекта. Не тормозит, контекст держит хорошо, интерфейс привычный.
Самое приятное — модели на любой бюджет. Есть топовые (Claude Sonnet 4.5, GPT-5.4 и другие). А главное — очень низкая стоимость токенов. Для каждой модели есть свой коэффициент стоимости. Для большинства повседневных задач их хватает с головой, и можно вообще почти не тратить деньги. Оплата — российскими картами или СБП, без всяких посредников и VPN.
Коротко по делу:
Если тебе нужен мощный multi-file agent и ты готов один раз настроить оплату через проверенного посредника — бери Cursor. Он до сих пор в топе по возможностям.
Если хочешь работать стабильно, без лишних телодвижений и не думать каждый месяц про «как бы оплатить» — Harvi Code сейчас выглядит гораздо практичнее для российского разработчика.
А вы как сейчас кодите с ИИ? Пробовали оба варианта? Что в итоге оставили в основном редакторе? Пишите в комментариях, интересно почитать реальный опыт.
Всем хабровчанам удачной недели!
Хотел поинтересоваться такой темой как школа «Result/University». Кто обучался, как быстро удалось найти работу? Какова оценка по 5 шкале?
Смогут ли ребята ввести в данную тему с минимальными рисками?
🚀 Snuffer: Как я превратил Android-смартфоны в распределенную сеть мониторинга (и спас свои нервы)
Меня зовут Виталий, я из команды ArcaneGaming.
Сегодня я хочу рассказать вам о своем пет-проекте, который немного вышел из-под контроля и превратился в полноценный продукт.
Встречайте - Snuffer !
😫 С чего всё началось?
Знаете это чувство, когда вам пишет клиент (или, что еще хуже, мама):
"А почему сайт не открывается?"
И ты такой:
"Да ладно, у меня всё работает!"
А потом оказывается, что сервер упал 3 часа назад, база данных ушла в дедлок, а ты в это время спокойно пил кофе и смотрел мемы.
Я перепробовал кучу сервисов: UptimeRobot, Pingdom, Better Uptime. Они крутые, спору нет.
Но:
Дорого , если нужно много проверок.
Ограниченные локации . Иногда нужно проверить доступность именно из конкретной сети или региона.
Скучно . Где веселье в том, чтобы просто заплатить денег?
И тут я посмотрел на ящик своего стола. Там лежали они... Герои прошлых лет. Samsung Galaxy S7, какой-то старый Xiaomi с треснутым экраном и Pixel первого поколения. Они смотрели на меня своими пыльными камерами и шептали: "Мы еще можем быть полезны..."
И меня осенило! 💡
А что, если использовать эти устройства как узлы мониторинга?
Ведь смартфон - это мощный компьютер с Wi-Fi и GSM модулем. Он может пинговать, делать HTTP-запросы, проверять порты. И если раздать такие телефоны друзьям в разных городах (или просто подключить к разным провайдерам), получится настоящая распределенная сеть мониторинга .
Так родился Snuffer
📱 Что такое Snuffer?
Если говорить умными словами, это распределенная система мониторинга доступности сервисов с использованием мобильных агентов .
"Давай короче, что это такое?":
Скачиваете Android-приложение .
Сканируете QR-код.
БУМ! Ваш телефон превращается в "Снуффера" (нюхача), который постоянно проверяет, живы ли ваши сайты.
🛠 Что он умеет?
HTTP / Keyword Monitor : Проверяет, отдает ли сайт 200 OK и есть ли на странице нужное слово (например, "Success"). Если нет - бьет тревогу.
Ping / Port Monitor : Пингует серверы и проверяет открытые порты (полезно для баз данных или кастомных сервисов).
DNS Monitor : Следит, чтобы ваши домены резолвились куда надо (а не на фишинговые заглушки).
Vulnerability Scanner : В админке есть встроенный сканер уязвимостей! (Но я пока его еще не сделал, но обязательно доделаю, честно!)
Telegram Бот : Уведомления прилетают мгновенно. Потому что почту мы читаем редко, а телегу - каждые 5 минут.
🤓 Немного "под капотом"
Я люблю, когда всё работает быстро и четко. Поэтому стек выбрал проверенный и надежный:
Backend : Node.js + Express (старая добрая классика).
Database : PostgreSQL + Prisma (потому что писать SQL руками в 2025 — это моветон, хотя я умею!).
Frontend : React + Tailwind CSS (чтобы было красиво и адаптивно).
Mobile : React Native / Expo (одна кодовая база, минимум боли).
Самое интересное - это архитектура .
Сервер раздает "задачи" (tasks) подключенным устройствам через WebSocket. Устройства выполняют проверки и шлют отчеты обратно.
Если устройство говорит "Сайт лежит", сервер не верит ему на слово (вдруг у телефона просто Wi-Fi отвалился?). Он ждет подтверждения от других узлов или от самого сервера. Это минимизирует ложные срабатывания.
🌍 Почему это круто?
Вторая жизнь вещам . Ваши старые гаджеты не загрязняют природу, а приносят пользу. Экологично! 🌱
Полный контроль . Вы сами выбираете, откуда мониторить. Хотите проверить доступность из офиса конкурента? Просто подбросьте им телефон с Snuffer (шутка... или нет?).
Бесплатно (почти). Вы платите только за электричество для зарядки телефона.
Проект живет и развивается. Сейчас я выкатил версию v4.15.11 (да, мы часто обновляемся!).
В планах:
iOS версия (Apple, пустите в AppStore, ну пожалуйста!).
Больше типов проверок (например, скриншоты сайтов).
Публичное API.
Если вам интересно попробовать или просто потыкать палочкой — залетайте:
👉 snuffer.net
Буду рад любому фидбеку, критике или просто комментариям.
Делаем работу фронтенд-приложений прозрачнее
С новым релизом для детального анализа запросов в App Platform.
Логи доступа (access logs) — это записи о каждом запросе к приложению. В логах вы найдете: IP-адрес клиента, дату и время запроса, запрашиваемый ресурс (HTML, CSS, JS, изображения), статус ответа, размер данных при передаче и др.
Например, вы настроили лимит по количеству запросов → приложение достигло порога и временно заблокировалось → скачали логи → нашли источник перегрузки.
Подробнее о функциях:
1️⃣ Аналитика трафика
Вы можете оценить количество запросов, пики нагрузки, распределение по времени, источники и географию пользователей.
2️⃣ Безопасность
Логи помогают заметить подозрительные паттерны, например, массовые запросы к одному эндпоинту или сканирование URL.
3️⃣ Поиск ошибок
Если в проекте возникли сбои или простой, вы можете проверить коды ответов и быстро найти источник 404 или 500.
Важно: Логи хранятся 24 часа + для выгрузки доступно до 10 000 файлов.
Игра на джем "Rush lvl 8"
Ребята всем привет, опубликовал на джем игру простую, но довольно интересную.
Мне посоветовали её на гитхаб pages выложить, что я и сделал.
Если хотите - зацените геймплей и если хотите непосредственно попробовать то вот ссылка
https://prikalel.github.io/they-grow/
Если хотите поддержать то оставьте комментарий под постом или зайдите на страницу джема и поставьте лайк мне будет очень приятно)
Команда разработчиков Chrome собрала на одной странице все крупные изменения в CSS за 2025 год. У каждой новой фичи есть подробное описание, интерактивная демонстрация, примеры кода и информацию о поддержке в основных браузерах.
Доброго всем. Первая публикация, прошу не особо...
Не стану растекаться мыслью по древу, пост - следствие поиска по запросам типа "как лучше вставить и анимировать SVG иконки", и подобным в том же ключе. Так как самыми релевантными ответами поиска не удовлетворён, решил написать свой, во-первых, чтобы услышать сообщество. Мало ли, возможно технология уже вовсю применяется в фреймворках, и на поиск все забили "всё и так слишком очевидно".
Во-вторых, сам до сих пор копаюсь в ванильном, поэтому, если старшие товарищи найдут сей вариант приемлемым, пусть пост останется как справка, вроде "а чё, так можно было?". Если же такая практика не применима по ряду пока неизученных мной причин, пост тоже пусть остаётся дополненный комментариями, как пример того "как не надо делать". В общем.
Решил упаковать спрайт в Web Components. Для примера взял отображение файловых иконок, за подопечных три распространённых файловых формата .docs, .xls, .pdf. Раз уж мне и так пришлось испытать муки отсутствия музы( вообще ни разу не художник), прошу отнестись с пониманием к внешнему виду конечного продукта. Упор был на простоту, контролируемость, компоновку. В том смысле, что косметика человеком с утончённым восприятием этого мира может быть применима отдельно.
Да, и ещё один аспект постарался обыграть - наличие общих свойств для всех иконок, коими выбрал подложку, и текст mime типа, и уникальные для каждой иконки элементы, ими выступили "брендовые" цвета и элементы. Так, выбор иконок файловых форматов для спрайта показался оптимальным.
Далее, в общем код(сокращённо, рабочий пример по ссылке), совсем немного к нему объяснений и ссылка на песочницу. И, само собой, ожидание комментариев.
customElements.define("wc-icon-file", class WC_ICON_FILE extends HTMLElement { constructor() { super(); this.#preform = ''; this.#mime = ''; this.#unic = ''; } connectedCallback() { this.init(); this.innerHTML=this.#preform; } init() { this._mime = this.getAttribute('data-mime'); let availableMime = { xlsfile: `<g class="wc-icon-${this.#mime}"> <line style="stroke-width:3;stroke-linecap:butt;" x1="13" x2="17" y1="24" y2="24"/> <line style="stroke-width:3;stroke-linecap:butt;" x1="18" x2="22" y1="24" y2="24"/> // и т.д. <text x="8" y="19" class="f-mime">.xls</text> </g>`, docfile: `<g class="wc-icon-${this.#mime}"> <line style="stroke-width:1.8;stroke-linecap:round;" x1="20" x2="24" y1="23" y2="23"/> <line style="stroke-width:1.3;stroke-linecap:round;" x1="16" x2="30" y1="27" y2="27"/> // и т.д. <text x="8" y="19" class="f-mime">.doc</text> </g>`, pdffile: `<path class="wc-icon-${this.#mime}" d="m 21.963376,23.938571 // и т.д. /> <text x="8" y="19" class="f-mime">.pdf</text>` } this.#unic = availableMime[this.#mime]; this.#preform = `<svg class="wc-icon-file" viewBox="0 0 48 48"> <path class="${this.#mime}" d="M13.528 3.087 30 3l8 9-.316 28.075c-.035 3.151-1.09 4.143-3.716 4.11h-20.44 c-2.303.095-3.676-.718-3.716-4.11V7.197c-.03-2.459 1.504-4.198 3.716-4.11z"/> ${this.#unic} </svg>` }; }); let wcIconFile = document.createElement('wc-icon-file'); // export {wcIconFile} по необходимости
Сам компонент на странице объявляется как обычно:
<wc-icon-file data-mime="xlsfile"></wc-icon-file> <wc-icon-file data-mime="docfile"></wc-icon-file> <wc-icon-file data-mime="pdffile"></wc-icon-file>
Код прокомментирую на предмет того, что в init() пришлось соблюсти порядок объявления переменных. Для определения схожих классов с разными "модификаторами" сначала брался атрибут в компоненте. По нему же делалась выборка this.#unic впоследствии вставляемая в this.#preform . Стили здесь не привожу, отмечу лишь, что настройки :hover и анимации там вполне работают.
Благодарю, что уделили время.
Obsidian Base16 Default Dark. Брутализм для глубокой работы
Создал инженерную тему для тех, кто относится к Obsidian как к IDE для мыслей.
Особенности:
Строгая визуальная иерархия
Семантическое цветокодирование
Чистая терминальная эстетика
Устанавливается из интерфейса Obsidian.
Рекомендованные шрифты и детали настройки – на GitHub.
Похоже, того фронтендера, который знал, что такое margin, уже оптимизировал "Режим ИИ". Либо вайбкодинг есть - поэтому отступов нет 😅
Сделал минималистичную тему для Habr, которая убирает отвлекающие блоки и акцентирует внимание на разных элементах текста.
Тема делает следующее:
Убирает лишние элементы с экрана
Размещает текст по центру для удобства чтения
Подчеркивает заголовки для лучшего считывания структуры
Делает заголовки цветными
Выделяет жирный (красным) и курсив (зелёным)
Окрашивает ссылки: внутренние (голубым) и внешние (фиолетовым)
Делает inline-код более заметным
Улучшает стиль таблиц
Делает более комфортный для чтения междустрочный интервал
Устанавливает для текста шрифт Inter
Установливается бесплатно через расширение Stylus (firefox / chrome).
minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript
В статусбаре в vscode – очень много всего: как полезного, так и лишнего.
Сегодня посмотрим, как можно его кастомизировать:
Можно просто спрятать (как делаю я)
Можно очень детально кастомизировать
Можно перенести часть его функций в плагины
И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.
В выпуске:
Будем писать CSS для удаления лишнего из status bar
"custom-ui-style.stylesheet": { "#status\\.problems": { "visibility": "hidden !important", "display": "none !important", } }
И создавать локальные плагины на #javascript для кастомизации поведения редактора
function updateColumnPosition() { const positionLabel = document.querySelector( '#status\\.editor\\.selection .statusbar-item-label', ) if (!positionLabel || !positionLabel.textContent) { // It might not exist for some reason ¯\_(ツ)_/¯ return } const currentLine = document.querySelector( '.line-numbers.active-line-number', ) // Now we would have the column position instead of the active line number: const colNumber = positionLabel.textContent.match(/Col (\d+)/) currentLine.textContent = colNumber[1] }
Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича.
