Mos.Hub//Парк.Код: разработчики кодят прямо на Садовом кольце
В этом году День программиста совпал с Днем города в столице, — и двойной праздник решили отметить по-особенному. В павильоне «Цифровые технологии Москвы» в «Музеоне» проходит хакатон под открытым небом Mos.Hub//Парк.Код.
Три волны ИТ-спринта, 40 минут на создание приложения, Python, Java или другой современный язык программирования, мгновенная загрузка результатов после тестирования. В целом привычный для разработчиков формат, вот только локация необычная. Место действия — не офис или коворкинг, а парк в самом центре столицы.
День программиста, который мы заслужили!
Подписывайтесь на «ДИТ: Технологии Москвы» — там рассказывают, как развивают ИТ в Москве.
В этом году День программиста совпал с Днем города в столице, — и двойной праздник решили отметить по-особенному. В павильоне «Цифровые технологии Москвы» в «Музеоне» проходит хакатон под открытым небом Mos.Hub//Парк.Код.
Три волны ИТ-спринта, 40 минут на создание приложения, Python, Java или другой современный язык программирования, мгновенная загрузка результатов после тестирования. В целом привычный для разработчиков формат, вот только локация необычная. Место действия — не офис или коворкинг, а парк в самом центре столицы.
День программиста, который мы заслужили!
Подписывайтесь на «ДИТ: Технологии Москвы» — там рассказывают, как развивают ИТ в Москве.
👍10⚡3👎2🔥2❤1
Интеграция CSS Cascade Layers в существующий проект
Подробный взгляд на внедрение CSS Cascade Layers в существующую кодовую базу, показывающий, как можно рефакторить старый CSS, используя слои, не нарушая при этом работоспособности сайта.
В качестве примера рефакторинга взят сайт Discord-бота, где демонстрируется, как с помощью слоёв можно улучшить структуру и управляемость стилей.
https://www.smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/
Подробный взгляд на внедрение CSS Cascade Layers в существующую кодовую базу, показывающий, как можно рефакторить старый CSS, используя слои, не нарушая при этом работоспособности сайта.
В качестве примера рефакторинга взят сайт Discord-бота, где демонстрируется, как с помощью слоёв можно улучшить структуру и управляемость стилей.
https://www.smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/
🔥9❤2👍2
MCP заменяет браузер: как разработчикам подготовиться к этому
Model Context Protocol (MCP) — новая парадигма, где AI-агенты вместо традиционного браузера будут напрямую вызывать API/инструменты MCP-сервера для выполнения задач, которые раньше мы бы делали кликами и навигацией.
Теперь разработчикам придется думать не о пикселях и UI-элементах, а о чётких эндпоинтах, API с понятной семантикой, UX, ориентированном на AI, и безопасности.
https://blog.logrocket.com/mcp-is-replacing-the-browser/
Model Context Protocol (MCP) — новая парадигма, где AI-агенты вместо традиционного браузера будут напрямую вызывать API/инструменты MCP-сервера для выполнения задач, которые раньше мы бы делали кликами и навигацией.
Теперь разработчикам придется думать не о пикселях и UI-элементах, а о чётких эндпоинтах, API с понятной семантикой, UX, ориентированном на AI, и безопасности.
https://blog.logrocket.com/mcp-is-replacing-the-browser/
🤣8🔥5❤4🤬1
View Transitions: что может пойти не так?
Сборник наиболее частых проблем, когда View Transition API не стартует, срабатывает некорректно или зависает — проблемы в имени перехода, отсутствие нужных CSS-правил, конфликты с фреймворками, кросс-доменной навигацией и т.п. Способы диагностики и устранения проблем.
https://vtbag.dev/tips/view-transition-fails-and-fixes/
Сборник наиболее частых проблем, когда View Transition API не стартует, срабатывает некорректно или зависает — проблемы в имени перехода, отсутствие нужных CSS-правил, конфликты с фреймворками, кросс-доменной навигацией и т.п. Способы диагностики и устранения проблем.
https://vtbag.dev/tips/view-transition-fails-and-fixes/
👍5❤1🔥1🤔1
🚀 AlfaHost.io — сервера без лагов
Ищете VPS с балансом цены и стабильности? Мы сделали тарифы так, чтобы было честно: быстрые NVMe-диски, выделенные ресурсы и SLA 99,8% аптайма.
Ваши проекты работают стабильно и предсказуемо.
🎁 Доступно всего 100 промо-тарифов по $3. А также гифткоды за подписку на @alfahost_io
— Оплата криптой и в рублях
— Сервер готов к работе за минуты
— Сети до 10Гбит/с
— Локации в Европе: Нидерланды, топовые Ryzen 9950x в Эстонии. Скоро - Германия, Финляндия, Швеция 🔥
По промокоду
VPS от $6, реферальная программа с 15% бонусом и возможностью вывода.
⚡️ Забирайте сервер на AlfaHost.io, пока тарифы не разобрали!
Ищете VPS с балансом цены и стабильности? Мы сделали тарифы так, чтобы было честно: быстрые NVMe-диски, выделенные ресурсы и SLA 99,8% аптайма.
Ваши проекты работают стабильно и предсказуемо.
🎁 Доступно всего 100 промо-тарифов по $3. А также гифткоды за подписку на @alfahost_io
— Оплата криптой и в рублях
— Сервер готов к работе за минуты
— Сети до 10Гбит/с
— Локации в Европе: Нидерланды, топовые Ryzen 9950x в Эстонии. Скоро - Германия, Финляндия, Швеция 🔥
По промокоду
ALFA_KKlBLDn будет скидка 10% 🔥 VPS от $6, реферальная программа с 15% бонусом и возможностью вывода.
⚡️ Забирайте сервер на AlfaHost.io, пока тарифы не разобрали!
❤4😁1
Стилизуем счётчики в CSS
Как использовать CSS Counters и
https://css-tricks.com/styling-counters-in-css
Как использовать CSS Counters и
@counter-style для автоматической нумерации элементов, оформления списков и нестандартных маркеров, без добавления лишнего HTML или JS.https://css-tricks.com/styling-counters-in-css
👍7🔥2⚡1
Упрощаем CSS с помощью псевдокласса :is()
Как псевдокласс :is() позволяет группировать сразу несколько селекторов внутри одного правила — вместо длинных списков через запятую — что делает CSS чище и проще поддерживаемым. Реальные примеры, где :is() помогает избавиться от дублирования правил и уменьшить вложенность селекторов, не теряя выразительности стилизации.
https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/
Как псевдокласс :is() позволяет группировать сразу несколько селекторов внутри одного правила — вместо длинных списков через запятую — что делает CSS чище и проще поддерживаемым. Реальные примеры, где :is() помогает избавиться от дублирования правил и уменьшить вложенность селекторов, не теряя выразительности стилизации.
https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/
🔥12❤2🤡2
Feature Highlight
Библиотека для подсветки UI элементов в приложении. Удобно для создания онбординга.
https://github.com/ahmad-moussawi/feature-highlight
Библиотека для подсветки UI элементов в приложении. Удобно для создания онбординга.
https://github.com/ahmad-moussawi/feature-highlight
👍10🤔4😐3⚡1
Filter – веб редактор изображений
Filter – мощный веб-редактор, созданный на React и TypeScript. Он предлагает интуитивный интерфейс, оптимизирован для мобильных устройств и обеспечивает быструю обработку изображений прямо в браузере. Проект использует Vite, Tailwind CSS и Filerobot Image Editor.
https://github.com/addyosmani/filter
Filter – мощный веб-редактор, созданный на React и TypeScript. Он предлагает интуитивный интерфейс, оптимизирован для мобильных устройств и обеспечивает быструю обработку изображений прямо в браузере. Проект использует Vite, Tailwind CSS и Filerobot Image Editor.
https://github.com/addyosmani/filter
1❤11😐5❤🔥4🔥1😁1
Создаём анимированные аккордеоны на основе Details
Как создавать продвинутые аккордеоны исключительно с помощью HTML и современного CSS. Применяем элемент
https://www.builder.io/blog/animated-css-accordions?utm_campaign=Issue-609
Как создавать продвинутые аккордеоны исключительно с помощью HTML и современного CSS. Применяем элемент
<details> и новые CSS-свойства interpolate-size и transition-behavior для плавной анимации раскрытия контента.https://www.builder.io/blog/animated-css-accordions?utm_campaign=Issue-609
👍9❤1👎1
Обновленный курс по изучению CSS от команды Chrome
Материал курса был переработан и дополнен девятью новыми модулями, чтобы отразить нововведения за последние четыре года. Теперь курс охватывает такие функции, как вложенность CSS, контейнерные запросы, пользовательские свойства и многое другое, фокусируясь на ключевых возможностях, доступных сегодня.
https://web.dev/blog/learn-css-refresh?hl=en
Материал курса был переработан и дополнен девятью новыми модулями, чтобы отразить нововведения за последние четыре года. Теперь курс охватывает такие функции, как вложенность CSS, контейнерные запросы, пользовательские свойства и многое другое, фокусируясь на ключевых возможностях, доступных сегодня.
https://web.dev/blog/learn-css-refresh?hl=en
1❤9👍1
Browserslist теперь напрямую поддерживает запросы Baseline, упрощая таргетирование возможностей браузеров
Эта интеграция позволяет разработчикам легко настраивать поддержку функций на основе их доступности. Отдельный пакет
https://web.dev/blog/browserslist-supports-baseline?hl=en
Эта интеграция позволяет разработчикам легко настраивать поддержку функций на основе их доступности. Отдельный пакет
browserslist-config-baseline больше не нужен, что упрощает конфигурацию проекта.https://web.dev/blog/browserslist-supports-baseline?hl=en
🔥8❤2👍1
Амбиентные анимации в веб дизайне: принципы и реализация
Амбиентные анимации это тонкие, медленные детали, которые создают атмосферу, не перетягивая внимание на себя. Они делают дизайн живым и интересным.
https://smashingmagazine.com/2025/09/ambient-animations-web-design-principles-implementation/
Амбиентные анимации это тонкие, медленные детали, которые создают атмосферу, не перетягивая внимание на себя. Они делают дизайн живым и интересным.
https://smashingmagazine.com/2025/09/ambient-animations-web-design-principles-implementation/
🔥7👍3❤🔥2❤1
Представлен Chrome DevTools MCP для взаимодействия с браузером
Теперь AI-ассистенты могут видеть и взаимодействовать с браузером: они могут запускать код, инспектировать страницу, диагностировать ошибки и отлаживать веб-приложения. Подробнее в статье Эдди Османи.
https://addyosmani.com/blog/devtools-mcp/
Теперь AI-ассистенты могут видеть и взаимодействовать с браузером: они могут запускать код, инспектировать страницу, диагностировать ошибки и отлаживать веб-приложения. Подробнее в статье Эдди Османи.
https://addyosmani.com/blog/devtools-mcp/
❤🔥10🔥1