Превращаем YouTube в личное хранилище данных

На самом деле это можно провернуть с любым видеохостингом. Автор видео показал, как он шифрует любой файл в видеоролик, загружает на YouTube, а потом по ссылке восстанавливает исходные данные бит-в-бит.

Наивный подход «записать байты в пиксели» сразу ломается об реальность: YouTube повторно кодирует видео с потерями, меняя цвета и убивая данные. Поэтому автор применил блочную схему: файл режется на крупные блоки, для каждого считается CRC для проверки целостности и генерируются избыточные «ремонтные» куски с помощью fountain-кода Wirehair, чтобы можно было восстановить блок даже после повреждений.

Дальше он прячёт биты не в сырые пиксели, а в коэффициенты дискретного косинусного преобразования (DCT), причём в старшие коэффициенты и даже в их знак, потому что именно они меньше страдают от сжатия. Видео экспортируется с lossless‑кодеком, а единственная «грязная» стадия — это сжатие на стороне YouTube.

Посмотреть как это происходит наглядно можно в его ролике (нет, это не файл с трояном).

WebMCP — новый браузерный API для создания веб-приложений, готовых к взаимодействию с AI-агентами

Это свежий протокол, который готовит веб к эре AI-агентов, позволяя разработчикам явно описывать функции сайтов как структурированные инструменты. ИИ сможет вызывать их напрямую, без хрупкого скринскрейпинга.

Представьте: вместо того чтобы агент парсил DOM, угадывал селекторы и ломался при любом апдейте, он получает готовый список API. Например, add_to_cart с параметрами productId и quantity, или search_flight с датой и направлением, и просто их исполняет в контексте вашей сессии. Это радикально проще и надёжнее аналогов вроде BrowserTools или Playwright‑скриптов, где каждый сайт требует кастомного кода, а поддержка — вечный геморрой.

WebMCP работает через два API: declarative (прямо в HTML-формах для базовых действий) и imperative (JS-регистрация сложных tools с схемой и execute-функцией). Его уже можно тестить с полифиллом на MCP-B. А чтобы это было проще делать рекомендую прочитать эту статью, где разбирается спецификация, примеры кода, security-нюансы и реальные кейсы для e-commerce/travel/support.

Создание бесконечной процедурной змеи с помощью Three.js и WebGL

Если вам наскучили однотипные демки на Three.js, эта статья — как раз тот случай, когда «змейка» внезапно становится очень серьёзной темой. Здесь вы узнаете, как собрать бесконечный процедурный объект, который реально можно переиспользовать в проде.

Автор разбирает, как из кривых и простых правил движения собрать живую, бесконечно тянущуюся змейку. Голова пишет путь, из пути строится кривая, а тело и хвост дорисовываются на GPU. За счёт этого движение получается плавным, без разрывов и костылей.

После прочтения вы будете смотреть на любые трейлы, хвосты и «живые» линии в вебе совершенно по‑другому и, главное, поймёте, как сделать свои.

Old but gold: Микрофронтенд с feature sliced design

В этой статье автор рассмотрел концепцию двух данных архитектур, обсудив их преимущества перед монолитными фронтенд‑приложениями и другими доступными настройками.

А так же рассказал, как ему удалось удачно объединить оба решения в одном проекте: https://habr.com/ru/articles/747952/

#архитектура

@tproger_web
Читайте также в VK и Max

Почему статические сайты возвращаются и чему они научились

Помните времена, когда статический сайт был сайтом-визиткой на голом HTML, а любой серьёзный проект требовал CMS? Мы привыкли считать нормальным сайт на WordPress, «Битриксе» или хотя бы самописном Django. Статика же оставалась уделом гиков, документации и страниц о скором запуске.

В 2025 году статические сайты вернулись. Не в качестве альтернативы для бедных, а как зрелая архитектура, которая решает 90% задач быстрее, дешевле и безопаснее, чем тяжёлый бэкенд. Просто мы не сразу заметили, как они научились тому, чего раньше не умели. А об этом уже подробнее в статье.

@tproger_web
Читайте также в VK и Max

Народ, что там у вас по грунту?

Лечим разбитое сердце вашего сайта

Представьте ситуацию: dashboard в React грузится 10 секунд вместо секунды, и вы уверены, что виноваты лишние rerender'ы или отсутствие memo. Но оказывается, что с бэкендом и React всё в подярке.

Оказывается, в Safari на M1 Max 94% CPU жрёт Layout на... сердечко ❤️. "Быстрый" COLRv1‑шрифт с SVG‑эмодзи для кроссплатформенности внезапно тормозит layout до 1600 мс на glyph (особенно ❤️ и 🤯), в то время как битмапы Apple Color Emoji летают.

Автору статьи пришлось разбираться с этой проблему. И он разобрался. А теперь делится своим опытом и рассказывает почему CoreSVG в Safari не справляется с векторными эмодзи Google.

Telegram | VK | Max | Дзен

В чем разница между «компонентами» и «утилитами» в Tailwind

Проблема в том, что Tailwind поощряет утилиты-first, но на практике люди создают компонентные классы через @apply или плагины — и тут начинается бардак: дублирование стилей, конфликты специфичности, сложность в поддержке. Статья предлагает чёткое разделение: утилиты в @layer utilities, компоненты в @layer components (с @apply), чтобы каскад работал правильно и утилиты всегда перекрывали.

Если вы не хотите ломать логику кода, то стоит запомнить эти простые советы. А подробнее почитать можно по ссылке.

@tproger_web
Читайте также в VK и Max

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

@tproger_web
Читайте также в VK и Max

Navigation API — удобный способ навигации,​ теперь доступен в базовой версии во всех основных браузерах

Наконец-то стал доступен официальный роутер для SPA без хаков на history.pushState. Десятилетия жалоб на History API позади.

Всё упрощается до одного слушателя navigation.addEventListener('navigate'), который ловит клики по ссылкам, формы, back/forward и даже programmatic navigation.navigate(). event.intercept() автоматически обновляет URL, историю, фокус (a11y), а ты просто рендеришь контент в handler().

Примеры и подробности в статье.

@tproger_web
Читайте также в VK и Max

WebKit анонсировал Interop 2026

Сделать так, чтобы ваш сайт работал во всех браузерах, может быть непросто, особенно если браузерные движки реализуют одну и ту же веб-технологию немного по-разному. Проект Interop решает эту проблему, объединяя основные браузерные движки для улучшения одного и того же набора функций в течение одного года. Interop 2026 — это уже пятая итерация совместного проекта браузерных движков (Apple/Safari, Google/Chromium, Microsoft/Edge, Mozilla/Firefox, плюс Igalia) по повышению кроссбраузерности веба.

В этом году 20 фокусных областей (15 новых, 5 carryover). Подробнее в статье.

#новости

@tproger_web
Читайте также в VK и Max

Возьмут, чтобы узнать продолжение

@tproger_web
Читайте также в VK и Max

Как вам формат TOON (Token-Oriented Object Notation) вместо JSON?

Массивы объектов объявляются один раз в заголовке users[2]{id,name,role}:, а дальше идут только данные через запятую без лишних скобок и ключей. Это сокращает объём данных на 30–60%.

Для Python уже есть готовые библиотеки, например python-toon и toons. Для промтов в ИИ экономия токенов. Для людей на глаз вроде тоже проще читается.

С другой стороны это просто CSV с дополнением, вложенности не очень удобно делать. Что думаете?

@zen_of_python, также в Max

Сравнение golang веб-фреймворков 2026 года: топ-5 лучших вариантов

Не можете выбрать веб‑фреймворк для проекта на Go? Мы сравнили топ‑5 вариантов 2026 года: Gin, Fiber, Echo, Chi и Beego! Разбираем плюсы, минусы и сценарии использования — читайте и выбирайте лучший!

#golang

@tproger_web
Читайте также в VK и Max

Регулярные выражения простыми словами

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

В своем материале он постарался помочь вторым стать первыми.

Если вас тоже начинает бросать в холодный пот при виде hello(\s*,\s*|\s+)world, то эта статья явно будет вам полезна:

https://habr.com/ru/companies/selectel/articles/848114/

@tproger_web
Читайте также в VK и Max

UI-паттерны для асинхронных задач и пайплайнов

Статья на LogRocket разбирает, как бороться с неопределённостью пользователей во время фоновых задач — импорт файлов, обновления, ETL-пайплайны. Главная идея: делайте невидимую работу видимой, чтобы юзеры не паниковали от спиннеров с загрузкой.

@tproger_web
Читайте также в VK и Max

Можно, а зачем?

Инструменты дебага LLM-приложений на JS

Антон Непша на HolyJS 2026 рассказал про инструменты для отладки приложений с большими языковыми моделями на JavaScript. Доклад — чистая практика для тех, кто строит чат-боты или агентов.

Он показал, как console.log и node inspect быстро исчерпываются. Вместо этого — LangGraph Studio, LangSmith, LangFuse, Arize Phoenix и Lunary. Каждый инструмент даёт трейсы вызовов моделей, время, токены, манипуляцию состоянием на паузе.

Разбор плюсов и минусов: что удобно для локалки, что для продакшена, как обойти платные ключи и софхостинг. Сравнение с Sentry, OpenTelemetry, трюки вроде косинусного сходства для роутинга и мониторинга дрифта моделей.

#доклад

@tproger_web
Читайте также в VK и Max

Курс по основам компьютерных сетей

Хотите разобрать компьютерные сети от физического уровня до DNS с нуля, как на экзамене с бумагой и ручкой? freeCodeCamp выложил бесплатный курс "Computer Networking Fundamentals" от Kshitij Sharma — 12+ часов глубокого погружения в стек сетей.

Смотрим по ссылке: https://www.youtube.com/watch?v=fQbBPa0ADvs

@prog_point (теперь и в Max)

Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. Здесь вы в простой форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять.

#javascript #видео