#javascript #sourceJavaScript: заметка о свойствах source ToggleEvent и closedBy HTMLDialogElementПривет, друзья!В этой небольшой статье я расскажу вам о новом свойстве события toggle - source, а также о новом атрибуте HTML-элемента dialog - closedby.Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog, но обо всем по порядку.⭐️◽️◽️◽️◽️📖 Читать
Веб-разработка — страница 2
Лента темы
Stripe и Meta Ads оба сегодня запустили CLI: теперь ваш агент может оплачивать и отменять подписки и закупать рекламу в инстаграме не отвлекаясь на позорный интерфейс. Любой онлайн сервис становится agent-first, а любой агент требует cli-first интерфейсы. Назад в 60-е.
Давайте раскидаем по фактам:1) "Изменения в одном почти всегда влекут изменения в соседних" и "как ты будешь добавлять новый функционал".Это, пожалуй, редфлаг номер один, этот аргумент в разных вариациях встречается настолько часто, что у меня давно заготовлен типовой ответ: никак. Если вы хотя бы раз использовали сторонние сервисы (оплата, авторзация, видео и т.д.), то знаете, что их интерфейс строится по принципу "конструктора", т.е. сложное поведение достигается не через добавление новых методов , а через построение композиции вызовов (это и есть основная задача проектирования), если бы автор комментария был прав, то мы бы не смогли разрабатывать никакие новые фичи, если используем внешние сервисы.Идея о том, что меняются только "близкие" сервисы - это признак очень кривой декомпозиции, значит автор проводит границу сервиса игнорируя когезию. В противном случае у него бы получилась нормальная декомпозиция сервисов, которые через свои интерфейсы позволяют составлять сложные композиции.Я регулярно встречаю команды, где буквально на каждый чих создается новый метод, или меняются существующие, всем плевать на версионирование, раздельную публикацию сервисов, изолированне тестирование и т.д. Все тестируется одним скопом, разворачивается так же все вместе, и конечено же это распределенный монолит.2) "То что у тебя все еще открывается интерфейс или страница логина, но в сам сервис ты не можешь зайти, потому-что, например отлетела авторизация - как бы не особо делает весь твой сервис рабочим."Если вы думали, что неумение проектировать это единственный недостаток моих оппонентов, то вот вам еще один - неумение анализировать.У автора комментария все смещалось в кучу, он выделил систему, как отдельный сервис, который неожиданно упал. Естественно такое возможно только в учебных проектах, где система авторизации и аутентификации может быть представлена одним сервисом. Но в реальных проектах авторизация - это целый набор сервисов (SSO, сервис токенов, сервис доступов/политик), в реальности эти сервисы задублированы и используются автоматические способы переключения между ними (Circuit Breaker).Исходя из представления "авторизация - это один сервис", можно легко сделать вывод о уровне подготовки наших оппонентов.Хочется еще раз сказать, ребята, давайте каждый будет заниматься тем делом, которым умеет? Потому что пока вы поражаете своей дремучей безграмотностью.
#статья дняКажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.В Chrome 147, наконец, добавили element-scoped view transitions.До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.Выглядело это примерно так:document.startViewTransition(() => { list.sort(...) render()})Теперь можно запустить переход прямо на контейнере списка:listElement.startViewTransition(() => { list.sort(...) render()})И в этот момент браузер работает только с этим куском DOM.На практике это означает, что можно спокойно:— анимировать список— параллельно обновить, например, сайдбар— и одно не будет цеплять другоеСплошные плюсы.Собственно, статья:https://developer.chrome.com/blog/element-scoped-view-transitionsЧто ещё в Chrome 147:https://developer.chrome.com/blog/new-in-chrome-147#chrome #view #transitions
Переехать с Webflow на кастом и сэкономить $100/месВ общем, ребят, переезд занял минут 20-30 от силы в моем случае. Я Америку тут не открою, и каких-то хитрых процессов не было. Алгоритм был таков:Выгрузить из Webflow архив с сайтом. У Webflow такой себе чистоты финальный архив, много всяких файликов (css аж 3 штуки). Ок, свалим на их архитектуру. Но я через курсора все равно почистил неиспользованые классы и графику, смержил CSS в один файлик, и выпилил файлик с стайл гайдом.Залить архив на гитхабС этим шагом в принципе ничего сложного нет. Создали репозиторий, и загрузили/попросили нейронку загрузить. Все.Повесили сайт на vercel (или что-то другое)Гитхаб хорошо дружит с верселем, поэтому там достаточно новый проект сделать, выбрать к какому репо на гитхабе подсосаться, и повесили на свой домен. Домен, кстати вешается бесплатно с вполне себе хорошими лимитами. В нейронке сделал деплой на прод (так и написал) и все.—-Есть нюансы для более сложных проектов.Если есть CMS или формы webflow - они работать не будут. Придется переносить весь контент и либо интегрировать что-то вроде formspree, либо пилить кастом формы и подрубать n8n.Про миграцию и выбор ЦМСки для агентских сайтов расскажу чуть позже - пока изучаю
📜 Let's Encrypt — настройка certbot в Ubuntu 20 для ApacheУстановим и настроим certbot для получения и обновления SSL сертификатов Let's Encrypt. Операционная система Ubuntu 20.04.6, веб-сервер Apache.Let’s Encrypt — центр сертификации, начавший работу в бета-режиме с 3 декабря 2015 года, предоставляющий бесплатные криптографические сертификаты X.509 для TLS-шифрования (HTTPS). Процесс выдачи сертификатов полностью автоматизирован.https://letsencrypt.org/Веб сервер работает, сайт, для которого требуется выпустить SSL сертификат, открывается по HTTPS. С HTTP настроен редирект на HTTPS. На сайте установлен платный сертификат, нужно заменить его на сертификат Let's Encrypt.#ssl #linux #webhttps://internet-lab.ru/certbot_ubuntu20
Нашёл очень показательный эксперимент про браузер будущего:https://flipbook.page/В Flipbook вся «страница» создаётся как картинка прямо в моменте. Кликаешь куда угодно, и система рисует следующий слой из контекста вашего клика. Вместо ссылок пользователь ходит по изображению. Любому. Грузите свое.Попробовал и вспомнил, что во сне текст обычно нестабилен: буквы плывут, потому что символическое мышление работает не до конца. В одном сериале героиня так проверяла, спит она или нет.У Flipbook пока та же проблема. Интерфейс как сон поисковика: красиво и странно, местами читать невозможно.Но сон хороший. Скоро можно будет не просыпаться.
Настоящий mobile-firstMobile-first многим известен как подход к вёрстке, при котором сначала реализуется версия для мобильных и расширяется до десктопа. Это противоположность подходу desktop-first, при котором вёрстка идёт от десктопа к мобильным.Разница обычно сводится к организации медиа-запросов и использованию min-width/max-width. Сначала применяются мобильные стили и переопределяются на более широких экранах, или десктопные переопределяются на более узких./* Mobile-first */.product-grid { --col: 1; --gap: 12px; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)) ; gap: var(--gap);}@media (min-width: 600px) { .product-grid { --col: 2; --gap: 18px; }}@media (min-width: 900px) { .product-grid { --col: 3; --gap: 24px; }}@media (min-width: 1200px) { .product-grid { --col: 4; }}/* Desktop-first */.product-grid { --col: 4; --gap: 24px; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)) ; gap: var(--gap);}@media (max-width: 1200px) { .product-grid { --col: 3; }}@media (max-width: 900px) { .product-grid { --col: 2; --gap: 18px; }}@media (max-width: 600px) { .product-grid { --col: 1; --gap: 12px; }}Принципиальной разницы нет. В теории, движение от малых экранов к большим даст в итоге чуть меньше стилей, потому что контент по умолчанию mobile-first, адаптируется под ширину экрана и идёт в потоке сверху вниз.Однако сам термин mobile-first говорит о том, что подход ориентирован в первую очередь на мобильные устройства. Суть не в том, в какую сторону переопределяются стили, а в том, чтобы учесть ограничения мобильных устройств.Ограничения исходят из конструктивных особенностей. Мобильные устройства компактные и переносимые, питаются от аккумулятора, работают в беспроводных сетях, управляются касаниями и жестами, вмещают меньше контента на экране.Размеры и питание от аккумулятора не позволяют использовать более мощное железо и массивные системы охлаждения. Поэтому мобильные устройства уступают десктопам по производительности, что повышает требования к оптимизации.Точки Wi-Fi и мобильные сети менее стабильны, чем проводные соединения. Скорость приёма/передачи, потери пакетов, задержки и другие характеристики сети на мобильных устройствах, как правило, уступают десктопам.Не смотря на безлимитные тарифы, всё ещё достаточно распространены тарифы с лимитированным трафиком и скоростью. Покрытие сети вне крупных городов ухудшается. Может быть включен режим экономии трафика или батареи.Отличаются сценарии взаимодействия. Нет мыши и курсора, виртуальная клавиатура на треть экрана заменяет физическую, управление осуществляется жестами, касаниями и долгими нажатиями вместо кликов и наведения указателя мыши.Настоящий mobile-first — это разработка сайтов и веб-приложений с учётом всех особенностей и ограничений мобильных устройств. Он затрагивает архитектуру проекта и выбор инструментов разработки, а не только направление медиа-запросов.В хорошем mobile-first:- Элементы управления и контент компактно и логично размещены на ограниченном по размеру экране, интерфейс не перегружен;- Интерактивные элементы достаточно большие для взаимодействия касаниями и расположены так, что с ними удобно работать;- Ресурсы оптимизированы для минимального размера и быстрой загрузки;- Видео, анимации, сложные фоновые вычисления и сетевые операции ограничены, если мало заряда батареи или включен энергосберегающий режим;- Упрощённая версия без лишних ресурсов загружается, если включен режим экономии трафика;- Контент кэшируется на устройстве и доступен оффлайн при потере соединения;- Контент адаптируется к изменению ориентации экрана, режиму разделения экрана и другим возможностям устройства;- Сайт использует аппаратные возможности устройства (камеру, микрофон, Bluetooth, акселерометр и другие), если это уместно и помогает пользователю;#css #ux #performance
Яндекс.КИТ и готовые платформы для электронной торговлиПришла первая заявка, на яндекс.кит. Кто не знает, это insales от Яндекса. Мы все 11 лет разрабатываем на коробках или кастомных решениях ecommerce. В портфеле больше 500 проектов. И облачные никогда не трогали. И тут я решил рассмотреть, чтобы лучше понимать, что есть на рынке.Выглядит суперпривлекательно в сегменте до 300 тысяч рублей на свой интернет-магазин. Учитывая, что яндекс субсидирует за счет сниженных тарифов на яндекс.маркет и директ.Кастомизации — 0 с хвостиком. Можно настроить свои секции (как в тильде) их штук 15 готовых. Набор готовых базовых модулей — 1С, СДЭК, Мой склад и подобные меинстримные решения. Другие модули не поставить.На фоне того, что селлерам некуда деваться с повышенными комиссиями, выглядит как глоток свежего воздуха.А вот в сегменте до 500 тысяч рублей уже конкурируют с Битриксом и шаблонами. В сегменте до 2х млн рублей уже несерьезно, в таком бюджет у компании уже есть специфичные процессы или планы по их появлению.У Insales остается совсем узкая прослойка. Яндекс — молодцы. Это всё помогает интегратором, так как плавно взращивает малый бизнес к кое-чему большему.
30 марта крупный российский бизнес обязали блокировать доступ без VPN. И это один из самых значительных выстрелов себе в ногу за последнее время. ВБ, Озон, Мэил, Яндекс, банки теперь должны ограничивать маркируемый трафик.В мире e-commerce, где мы боремся за каждое лишнее поле в заявке, чтобы не дай бог не спугнуть клиента и не уменьшить конверсию, встречать пользователя предупреждением о недоступности сервиса и просьбой уйти, выключить выключить VPN и вернуться… очень смело. Но кого это ебет.Всем удачи!
Потестировал https://claude.ai/design Сделал и выложил шаблон консалтингового лендинга — вместе с методологией, как его правильно заполнять.Что внутри:— Двуязычный одностраничник (RU/EN) на React без билда. Деплоится на любой хостинг за 5 минут, работает даже на шареде за $3/мес.— Методология из 14 секций: как упаковать advisory-оффер, чтобы он конвертил. Разбор каждой секции с обоснованием.— Bootstrap-промпт для Claude Code: даёте его своему AI, он за 10 минут интервьюирует вас и переписывает все плейсхолдеры под ваш оффер.Для независимых консультантов, бутиковых команд и экспертов, переходящих из найма в advisory-практику.Живой пример: https://alexkrol.com/preview/Шаблон: https://github.com/AI-agents-incubator/consulting-landing-templateФоркайте, запускайте промпт, деплойте.
🔐 Аудит безопасности сайта — 2026: что проверяет Роскомнадзор при проверке?РКН использует ИИ для автоматического мониторинга 24/7 🤖, а также реагирует на жалобы граждан.Проверка контента: Запрещены: пропаганда наркотиков, суицида, экстремизм, фейки об армии, а также информация о продаже алкоголя и лекарств без лицензий. С 1 марта 2026 года требуют блокировать контент, который «дискредитирует традиционные ценности» (семья, патриотизм и т.д.). Штрафы для юрлиц доходят до 5 млн рублей.Реклама: Сайты обязаны маркировать рекламу не только в соцсетях, но и на сайтах (токены через ОРД).Хранение данных: Сервера с базами данных россиян должны находиться только в РФ 🇷🇺 📄 Документы на сайте: — Политика обработки ПДн (на каждой странице или в подвале, рядом с формами) — Согласие на обработку персональных данных (отдельный документ) — Согласие на рекламную рассылку (при необходимости) — Публичная оферта (если требуется) — Контактные данные и юр. адрес оператора (в подвале)🍪 Cookie-баннер:Обязателен. Должен содержать:— кнопку/галочку согласия— перечень инструментов сбора (Яндекс Метрика и др.)— конкретные цели обработкиБез этого — нарушение ⚠🌍 Трансграничная передача данных:Запрещена. Использование Google Analytics, YouTube, ReCAPTCHA, Google Maps трактуется как передача данных за границу.Штрафы — до 18 млн рублей.🇷🇺 Закон о русском языке (с 1 марта 2026):Вся информация для потребителей — на русском.Иностранные слова — только как дублер.Исключение: зарегистрированные товарные знаки.📞 Звонки: Операторы связи обязаны маркировать звонки юрлиц, чтобы бороться со спамом. Сайты должны проверять, с каких номеров звонят клиенты.📌 Вывод: В 2026 году Роскомнадзор проверяет всё: от контента до локализации серверов и cookie. Ваш сайт должен быть полностью очищен от иностранного кода и оснащён полным пакетом юридических документов.
🤔 Что такое элемент datalist в html 5?<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение. 🚩Как работает `<datalist>`? Пример: автодополнение города <label for="city">Выберите город:</label><input list="cities" id="city" name="city"><datalist id="cities"> <option value="Москва"> <option value="Санкт-Петербург"> <option value="Казань"> <option value="Новосибирск"></datalist>🚩Можно ли использовать с `type="number"`? Нет, <datalist> не работает с type="number". Но с type="text" и type="email" — работает отлично. <input type="number" list="numbers"><datalist id="numbers"> <option value="10"> <option value="20"></datalist>Рабочий вариант <input type="text" list="numbers">Ставь 👍 и забирай 📚 Базу знаний
📹Атрибут poster для тега <video>Атрибут poster в HTML-теге <video> задаёт изображение-заставку, которое показывается до начала воспроизведения видео. Это как обложка у книги - первое, что видит пользователь.<video src="movie.mp4" poster="preview.jpg" controls> Ваш браузер не поддерживает видео.</video>❗Что важно учитывать☑️Размер и соотношение сторон. Лучше всего, когда размер постера совпадает с размерами видео - иначе браузер растянет или сожмёт картинку, и может появиться некрасивая рамка. Например, для видео 1920×1080 используйте постер такого же разрешения или пропорций 16:9.☑️Вес файла. Постер загружается раньше видео, поэтому он должен быть лёгким. Имеет смысл сжать JPG или использовать WebP - пользователь увидит заставку быстрее.☑️Отсутствие постера. Если poster не указан, браузер покажет либо пустой чёрный прямоугольник, либо первый кадр видео (поведение зависит от браузера и атрибута preload).Практический пример:<video width="800" height="450" poster="/images/preview.webp" controls preload="metadata"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"></video>Здесь preload="metadata" в паре с poster - хорошая комбинация: браузер не качает само видео заранее, но сразу показывает красивую заставку.
Мы потратили 100к на сайт-и его сразу начали «ломать» Мы только выдохнули после обновления:новый сайт, SEO, разработка — вложили чуть больше 100.000 ₽, несколько недель работы.И буквально на следующий день прилетает сообщение от разработчика:«Отразил целенаправленную атаку на ваш сайт»Сначала звучит тревожно.Но если разобраться — это не “взлом”.Это попытка испортить нам поведенческие факторы:люди (или боты) заходят на сайт и сразу уходят →растёт процент отказов →поисковики начинают думать, что сайт плохой.Зачем это делать?Чтобы опустить нас в выдаче.Кто это делает — можно только предполагать.Такие вещи часто автоматизированы:мониторят новые сайты, изменения, активность.И вот тут интересный момент.Если на тебя начинают тратить ресурсы,значит ты уже не пустое место на рынке.Мы это воспринимаем спокойно.Потому что такие “атаки” не убивают сильный продукт. Посмотреть как выглядит наш сайт сейчас: greentechnn.ru
Самое первое изображение в интернетеВ 1990 году сотрудницы ЦЕРН (Европейская организация по ядерным исследованиям) основали поп-группу Les Horribles Cernettes — «ужасные девушки из ЦЕРН». Их песни были посвящены физике и отношениям между учёными. В 1992 году Тим Бернерс-Ли разместил их фотографию на одной из первых веб-страниц — это изображение и считается одним из первых в истории Всемирной паутины.Их самая узнаваемая песня: https://www.youtube.com/watch?v=1e1eLe1ihT0
У меня постоянно чешутся руки что-то навайбкодитьПомните я делал Визуальную практику? Сейчас я хочу ее полностью перенести в удобный веб-интерфейс. Чтобы все было по разделам, удобно, плюс комменты, ну и еще больше материала, упражнений и примеров. Это будет перерождением http://uisamurai.ruМне уже самому казалось, что я забросил проект и он стал не интересным, но сейчас я хочу его развивать. Есть идеи, мысли. Хочется собрать в одну эко-систему свои курсы (которые я кстати сейчас тоже перерабатываю) и вокруг них наделать разных бесплатных полезных штучек. Опять же, для курсов хочу сделать свой личный кабинет, с прогрессом, ачивками. Короче по красоте чтобы)В целом мне хочется чтобы сервис закрывал все вопросы обучения интерфейсному дизайну. Причем все самое важное и необходимое бесплатно. А попрактиковать и прокачаться уже платно.На данный момент сделал уже UI-тренажер. На все ушло примерно 3 дня, но это еще учитывая, что я заранее продумываю архитектуру с запасом на новые сервисы. Плюс, несмотря на то, что сейчас функционала оч мало, все равно сделал админку. Чтобы в будущем все контролировалось через админку. А то я знаю, сейчас я забью на нее, а завтра функционала станет дохуя и я офигею админить это через бд)))В ближайшие дни буду заниматься подбором хостинга и переносом.Планирую постоянно делиться тут с вами процессом.По пет-проектами кстати у меня не стоп, но пауза. К ним тоже вернусь скоро))
Пишем простой REST-сервис на Rust https://eax.me/2026/2026-04-17-axum.html
Сегодня утром по инерции зашел проверить вконтакте. Да, я из тех людей, которые его до сих пор периодически пингует, тк мне там до сих пор иногда пишут, хотя основной канал взаимодействия — телеграм.И что же я вижу? Доблестный вк мне выдает угрожающее послание, что мол зайти в него не получится, если я пользуюсь популярными нынче сервисами.Я аж кофе поперхнулся когда это увидел. То есть вот эти люди, которые за несколько лет просто напросто заживо похоронили когда-то классную и продуманную социальную сеть (да-да, в это сложно поверить, но ВК когда-то, до продажи Дуровым, был чертовски хорош), угрожают мне тем, что я не смогу поскролить их ленту и не потеряю столь ценное время за прокрастинацией? Серьезно?Мне это напомнило старую поговорку про ежа и странные методы его запугивания. Прям буквально я.Посмотрев на это, я с радостью выключил телефон и занялся нормальными делами, параллельно удивляясь такой заботе со стороны разрабов вконтоса. Плюс подумал, что можно стартап запускать — приложение, которое не даст тебе зайти в соцсеть пока ты, ну не знаю, не отожмешься 50 раз. А чтобы этот блок убрать надо сходить на весенний субботник.Вот была бы польза. Однозначно.
Еще раз скажу про вайб-код, хотя я не собирался возвращаться к этой теме. Я буду очень точечно.На личном примере убедился, что эта штука очень хорошо помогает делать вспомогательные инструменты.Предыстория:Нам для одного проекта потребовалось усилить тестирование. И усилить не просто людей добавить, а именно сделать, чтобы тестирование было быстрее и качественнее.Что мы сделали?Мы очень быстро, буквально за один день, собрали механизм, который частично на PHP, частично на Node.js выполняет ряд ключевых вопросов тестирования, реализует ряд ключевых тестирований по сайту.А именно:➖ поиск 404-х страниц➖битые картинки➖ошибки в JavaScript➖сквозные сценарии➖конверсионные сценарии➖пентест безопасности➖SEO-аудитВажный момент про качество:Вот всё это было не очень с высоким качеством, то есть это всё требует доводки. Но буквально за один день была собрана платформа, которая всё это считает, собирает отчёты, документирует сама себя, как она работает. И Заказчику это ничего не стоило, мы сделали это как инструмент для себя. Я уже говорил и повторю: вспомогательные инструменты не надо делать круто. Их надо делать быстро, чтобы они давали результат. Результат для бизнеса в данном случае — это отчет об ошибках, который обновляется один раз в час. А не какая-то суперсистема тестирования, которой вы будете гордиться и рассказывать на конференциях.Мир меняют технологии быстрой разработки.Если ты программист — проснись и начни этим пользоваться, ты сможешь приносить больше пользы.Если заказчик — пойми: возможности разработчиков выросли в разы.Нужно сделать такой же инструмент под вашу боль? Напишите лично мне — я бережно передам в правильные руки. Поговорим.Я в 💬MAX и 💙VK. Подписывайтесь😉
👀 Go-фреймворк для серверного UI без React и npmDoors это бэкенд-фреймворк для веб-приложений на Go. Он позволяет строить реактивный UI без JS-фреймворков, без гидратации и без npm. Весь бизнес-логика живёт на сервере, браузер работает только как тонкий клиент для отображения.Стандартный стек Go + React требует писать и поддерживать два слоя: API на Go и фронт на JS. Это дублирование типов, синхронизация состояния, сборка, зависимости. Htmx даёт частичные обновления страницы, но не даёт нормального реактивного состояния и контроля из Go.Doors убирает API-слой полностью. Сервер держит живое состояние каждой вкладки пользователя, а браузер просто синхронизирует изменения DOM.Как это работаетПри загрузке страницы сервер создаёт экземпляр сессии и отдаёт cookie. Дальше между клиентом и сервером держится лёгкое соединение через короткие HTTP-запросы с поддержкой QUIC. Пользователь что-то делает и событие летит на Go-обработчик. Сервер считает изменения и отдаёт конкретные обновления DOM.Два ключевых примитива:Door — динамический контейнер в HTML. Умеет обновляться, заменяться, удаляться. Каждый Door имеет свой жизненный цикл и локальный context, который можно использовать как хук при размонтировании.Beam — реактивное состояние на сервере. SourceBeam хранит мутабельное значение, производные Beam считаются из него. Обновления гарантированно консистентны по дереву контейнеров.Пример запуска:import "github.com/doors-dev/doors"func main() { app := doors.New() // регистрация страниц и обработчиков app.Run(":8080")}➡️ Репозиторий📍 Навигация: Вакансии • Задачи • Собесы🐸 Библиотека Go-разработчика#GoToProduction
VK и идея обязательного новостного виджетаВ VK обсуждают Национальную информационную платформу на базе «Дзена». Суть идеи в том, что крупные цифровые сервисы могут обязать встраивать новостной блок «Дзена» в сайты и приложения. Судя по презентации, которую изучила газета «Коммерсант», поисковые сервисы и соцсети должны будут показывать на главной странице виджет с топом-5 новостей. Для аудиовизуальных платформ и классифайдов формат мягче: кнопка, ведущая в раздел «Дзена» с топом-15 новостей.Отдельный элемент конструкции — централизованный отбор источников. СМИ, чьи заголовки попадут в блок, будет определять правительство. Оно же, как утверждается, назначит оператора платформы на пять лет. В обмен сервисам обещают долю рекламной выручки.Виджет обяжут внедрить интернет-ресурсам с ежедневной аудиторией более 5 млн человек. Для остальных площадок обсуждается отсрочка на полгода.Для реализации схемы, по данным издания, потребуются поправки в закон «Об информации». У VK нет права законодательной инициативы, поэтому сам факт существования проработанного проекта выглядит как признак координации с государственными органами.С точки зрения информационной безопасности, обязательная интеграция стороннего виджета — это риск цепочки поставок. На стороне площадки появляется внешний компонент, который влияет на содержимое главной страницы, клиентский код, телеметрию и, возможно, на загрузку зависимостей. Вопросы здесь не праздные: кто отвечает за инцидент, как фиксируется состав кода, как проходит изменение виджета и как контролируется его поведение.Этот риск уже иллюстрировался на практике. В 2022 году произошёл массовый дефейс сайтов госорганов через виджет «Госмониторинг». Интеграция общего внешнего компонента превратила один канал компрометации в масштабный инцидент.В презентации VK необходимость законопроекта аргументируют уходом зарубежных сервисов трафика и перетоком аудитории в мессенджеры и платформы «без новостей». В презентации уточняется, что с 2022 года аудитория СМИ снизилась на 30–70%. В то же время медиа стали «критически зависимы от трафика «Дзена», так как он обеспечивает до 80% переходов на сайты СМИ».По мнению собеседников «Коммерсанта», виджет, с одной стороны, призван сохранить аудиторию традиционных СМИ и фильтровать информацию от фейков, но с другой – может привести к ситуации, когда платформа начнет доминировать на рынке и начать устанавливать свои правила, не учитывая интересы остальных производителей контента.Источник: https://eyes.etecs.ru/r/fa9aff
Я редко добавляю новые расширения в Chrome, чтобы не сломать его окончательно, но тут сделал исключение. Смотреть YouTube без Obsidian Web Clipper 1.4 теперь не нравится 😮💨Превращает страницу с видео в крайне удобное полотно с возможностью перескочить на нужное слово, все разбито по сегментам, ничего лишнего и отвлекающего. Еще и рейтинг в магазине расширений почти пятерка.
https://prefab.prefect.ioPrefect выкатили Prefab — UI-фреймворк для сборки интерфейсов целиком на Python. Карточки, таблицы, чарты, формы — 100+ готовых компонентов. Вложенность задаётся через context managers: with Card(): вместо JSX. Код компилируется в JSON-протокол, а рендерит всё bundled React-фронтенд на shadcn/ui.Стейт реактивный. Класс Rx связывает данные с компонентами, а декларативные экшены — SetState, ShowToast, SetInterval — управляют поведением без единой строки JavaScript. Получается полноценное SPA, написанное питонистом, который ни разу не открывал node_modules.Но главное здесь не DX для дашбордов. Главное — MCP Apps. Prefab встроен в FastMCP и спроектирован так, чтобы LLM-агент мог генерировать интерфейс на лету: протокол декларативный, сериализуемый, безопасный для model output. Агент дёргает тул — и возвращает пользователю не JSON-блоб, а интерактивный UI с кнопками и графиками. В Python MCP-экосистеме такого до сих пор не было.Идею декларативного протокола с отдельным рендерером первым показал FastUI от Pydantic. Prefab перенёс подход в MCP-контекст и добавил реактивность на клиенте.Python 3.10+, pip install prefab-ui. Проект в активной разработке — авторы сами просят пиннить версию.
Что такое CSS containment и как его использовать? Гарри Робертс объясняет недооценённую возможность CSS, позволяющую браузеру пропускать лишнюю работу по раскладке и отрисовке. Статья разбирает каждое значение contain (layout, paint, size, style), сокращения content и strict, а также content-visibility для ленивого рендеринга. Приводится пример OpenTable, где contain: strict сократил время раскладки с 11 до 2 мс, ограничив область с 4371 до 73 элементов. #css #performancehttps://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/
Не теряемсяРаньше я составлял и публиковал дайжесты #Пульс_веб_платформы. Дело это было довольно муторное и меня хватило на выпуск где-то примерно 80 еженедельных дайджестов. В процессе я каждый четверг пропускал через себя несколько других дайджестов, около сотни тг-каналов и примерно столько же отдельных RSS-блогов.С момент последнего выпуска прошло около 10 месяцев, одно время я совсем бросил что-то читать, но потом интерес вернулся. Попробовал собрать несколько дайджестов, но мозг сразу сказал, что заниматься написанием дайджестов больше не будет. Но читать дайджесты при этом хочется!И я решил построить автоматизированный пайплайн сборки дайджестов (прежде всего для себя, но может быть и вам зайдёт).В общем, дождался блокировки телеги и вынес дайджест в отдельного бота @web_platform_pulse_bot.В нём ежедневно утром бот публикует примерно 10 ссылок с самым интересным, что произошло в индустрии за прошлые сутки. Аннотации пишу уже не я, а модель, поэтому в душевности дайджест, конечно, потерял. Но в информативности, пожалуй, даже прибавил, так как посты стали ежедневными вместо еженедельных, и покрывают большее число материалов. Если хочется за пару минут понять, что там произошло в целом, достаточно краткой сводки утром по диагонали вместо чтения объёмных рассылок.Я умышленно отделил авторский контент блога от генерёжки дайджеста, поэтому он будет именно в отдельном боте @web_platform_pulse_bot.Помимо бота дайджест публикуется на сайт https://juwain.github.io/web-platform/pulse/ и в RSS https://juwain.github.io/web-platform/pulse/rss.xml. Основной веблог тоже перевёз на gh pages https://juwain.github.io/web-platform/blog/ и в RSS https://juwain.github.io/web-platform/rss.xml (на очередную оплату домена webplatform.tech блог, увы, не заработал).Отдельно настроил публикацию в зеркало на статику яндексовского sourcecraft. Там ресурсы доступны даже на парковке, так как Яндекс в белых списках.Вот зеркало дайджеста https://juwain.sourcecraft.site/web-platform/pulse/ и его RSS https://juwain.sourcecraft.site/web-platform/pulse/rss.xml.А также зеркало основного блога https://juwain.sourcecraft.site/web-platform/blog/ и его RSS https://juwain.sourcecraft.site/web-platform/rss.xml.Если интересны технические детали реализации, поставьте реакций, я тогда позже напишу отдельный пост, как эта фиговина работает в более-менее автономном режиме и в лучшем случае требует от меня поревьюить подготовленные тексты через интерфейс TG.В комментах приложу пару примеров дайджестов за прошлые дни.#Лаборатория_веб_платформы@web_platform | Поддержать платформу 🌟
Claudflare сделали осовременненый опенсорсный (MIT) клон wordrepss - EmDash.Написан не на php, а на TypeScript (Astro based), но с учетом того что работать он будет на воркерах - это весьма похоже на опыт php - просто меняем файлы на сервере и нечего отдельно запускать не нужно, и в простое ничего не потребляется.Из интересного - все та же система плагинов, НО каждый плагин "sandboxed" (см. рис. 2), что в теории решает главный головняк с вордпрессомА теперь о минусах. Фреймворк то опенсорсный а вот инфраструктура клаудфлера и их воркеров нет.(ну не wrangler же нам запускать на своем сервере)Более того, там нужны особые "динамические" воркеры которые доступны только на платных аккаунтах cloudflare. И пусть там стоимость начинается от 5$ в месяц для многих будут огромные проблемы оплатить эту копейку с учетом сегодняшней ситуацией в мире.Вобщем интересно было БЫ, если б дали все для селфхоста.Живая демка
Задумался я о следующем. Вот представьте, пришли бы ко мне товарищи из соответствующих структур за советом: а как бы ты боролся с мессенджером, чьё руководство демонстративно отказывается выполнять законы РФ, но в котором сидит большинство населения и тупая блокировка не вызывает ничего, кроме массового саботажа даже среди самых лояльных групп? Я бы ответил так. Во-первых, ни в коем случае не устраивал бы тупых блокировок в преддверии федеральных выборов. Это просто харам, наихудший выбор времени. Во-вторых, не пытался бы навязать силой "государственный мессенджер" как альтернативу — это его дискредитирует. Это всё то, чего делать нельзя. Что делать можно? Для начала, важно понимать ключевой функционал. Там есть четыре позиции. Первое — индивидуальное общение, один в один. Второе — групповые чаты, закрытые и открытые, включая комментарийные к каналам. Третье — сами каналы. Четвёртое — паблики, выступающие в роли хранилища контента. Дальше теория. Системы чаще всего проигрывают в борьбе с сетями; они хороши против других систем, с сетью же может эффективно бороться только другая сеть. Что такое деградация когда-то живых сетей, мы хорошо знаем из опыта — как умирали Фидо, ЖЖ, как превращался в пенсионерскую помойку фейсбук (деградировавший сам по себе ещё до всех запретов) и т.д.Можно ли деградировать телегу до уровня второстепенного теряющего аудиторию сервиса, которым пользуются только завзятые фанаты? В теории да. Для этого нужно планомерно перетаскивать из неё в другие сетевые пространства ключевых генераторов наиболее востребованного контента, причём не кнутом, а пряником — создавая, например, для них такие возможности его монетизации, которые сильно ограничены в той же телеге. То есть превратить, например, свой пресловутый госмессенджер в первую очередь в средство заработка для тех, кто в состоянии магнитить на себя большие потоки трафика. Такое, каким был когда-то ютуб. Да, это работа долгая и нудная, но результат она может принести, хотя и не сразу. Идеальным ходом была бы организация коллаба с ведущими отечественными маркетплейсами, дуополией Озон-ВБ. Им нужен трафик, чтобы продавать свою пластиковую фигню, они вламывают адские ресурсы в его привлечение. Соответственно, простая модель: для бесплатных пользователей мессенджера реклама (с ии-подстройкой), для платных — без рекламы, но тогда делиться взносами за премиум-аккаунты с владельцами контент-площадок, на которые они ходят. Буквально вместе с каждым просмотром автору капает копеечка прямо на счёт в том же мессенджере. Рано или поздно окажется, что в Свободном и Независимом ты вещаешь за свой счёт или барыжишь нативкой, а в Суверенном зарабатываешь прямо в процессе основной деятельности — кто по чуть-чуть, а кто и помногу. И все те, кому плюс-минус пофиг на цензуру и око большого брата, сделают нужный Родине выбор. Ну а дальше дело техники; можно уже и блокировками дожимать — но при другой ежедневной аудитории, с позиций силы, а не как сейчас.
Меня же не одного уже ДОЕБАЛ пк интерфейс ютуба? Именно плеер.Когда переключаешь в режим "широкий экран" то нахуй всё улетает куда-то. Комменты улетают на другую планету нахуй, плейлист улетает туда же и становится неюзабельно широким. А чтобы вернуть нормальный интерфейс нужно жать ф5. Я это уже каждый день делаю. Нахуй это делают емае
Оказывается, в Яндекс-телемосте у админа нет прав выключить всем гостям микрофон по умолчанию и включать с пульта. И в итоге периодически в эфир влезают какие то школоло изрядного возраста, а бедный админ только кикнуть их может.Зум такую проблему получил в первые месяцы ковида - и прибил за два месяца. А Яндекс пятый год пофиксить не может. Импортозаместители, бнах!