Веб-страница
Kanalga Telegram’da o‘tish
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Веб-страница analitikasi
Веб-страница (@tproger_web) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 22 248 obunachidan iborat bo'lib, Sanʼat & Dizayn toifasida 1 388-o'rinni va Rossiya mintaqasida 29 501-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 22 248 obunachiga ega bo‘ldi.
26 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -173 ga, so‘nggi 24 soatda esa -8 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 8.39% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.82% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 866 marta ko‘riladi; birinchi sutkada odatda 1 294 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent css, javascript, html, github, браузер kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 27 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Sanʼat & Dizayn toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
22 248
Obunachilar
-824 soatlar
-427 kun
-17330 kun
Postlar arxiv
22 248
Иконки как CSS-токены: компактный HTML с оговорками
SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через
--icon. Так изображение можно менять при наведении или переключении темы без замены узлов.
Рисует иконку маска на псевдоэлементе. Цвет берётся из currentColor, а style queries вместе с @property помогают не создавать пустой псевдоэлемент там, где иконки нет.
Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно.
📎 Демо и обходы Safari22 248
Две вкладки могут договориться об очереди синхронизации
Приложение открыто в двух вкладках, и обе хотят синхронизировать данные с IndexedDB. Web Locks API позволяет договориться, кто выполняет эту работу сейчас, через блокировку с общим именем.
navigator.locks.request() запускает callback после получения блокировки. В обычном режиме exclusive остальные запросы того же имени ждут. Блокировка освобождается после завершения callback или возвращённого им Promise, поэтому асинхронную работу важно дождаться внутри него.
Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства. 📎 Сценарии и ограничения Web Locks в MDN.22 248
preconnect готовит соединение до запроса ресурса
Критичный шрифт находится на другом домене. Прежде чем скачать файл, браузеру нужно разрешить имя, установить соединение и договориться о TLS. Подсказка
preconnect позволяет начать эту подготовку раньше.
Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий crossorigin. В примере Google Fonts это <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>.
Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес, dns-prefetch делает только DNS-запрос и обходится дешевле. 📎 Различия подсказок в web.dev помогают выбрать нужную.22 248
inert отключает взаимодействие с целой панелью
Панель уехала за край экрана, но её ссылки всё ещё получают фокус по Tab. Одного визуального перемещения недостаточно, чтобы сделать содержимое неактивным.
Атрибут
inert убирает обычные вложенные ссылки, кнопки и поля из порядка Tab и дерева доступности. Пользователь не может сфокусировать или нажать их. Текст внутри также не находится поиском по странице и не выделяется. Это полезно для временно неактивного блока интерфейса.
Сам атрибут ничего не прячет и не добавляет визуального признака отключения. Оформление состояния и возврат фокуса после закрытия панели нужно продумать отдельно. Для одной нативной кнопки обычно подходит disabled. 📎 Поведение inert в MDN, включая исключение для модального <dialog>.22 248
Лимит размера JS-бандла можно проверять до слияния
Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений.
Если приложение уже собирается своим бандлером, достаточно связки
size-limit и @size-limit/file. В конфигурации укажите path на готовые файлы из dist и limit. Саму проверку запускайте после сборки, чтобы сравнивать её результат, а не исходники.
Плагин file по умолчанию считает размер с Brotli. Можно выбрать Gzip или отключить сжатие. Это ещё не замер времени исполнения JavaScript: для него нужен отдельный плагин. И размер npm-пакета тоже не равен клиентскому бандлу. 📎 Настройка для приложений в README.22 248
Прокрутку панели можно удержать внутри панели
Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему.
Для вертикальной панели задайте
overscroll-behavior-y: contain на её прокручиваемом контейнере. Значение прерывает такую передачу, но может сохранить эффект отскока у края. none убирает и передачу прокрутки, и этот эффект.
Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом <iframe> не управляет внутренним документом. Перед применением проверьте поддержку нужного значения в целевых мобильных браузерах. 📎 Механика и демо в MDN.22 248
URLSearchParams может превратить плюс в пробел
Если собрать query-строку вручную, значение
E+AXQB+A при разборе может стать E AXQB A. Конструктор URLSearchParams воспринимает плюс как пробел. Для Base64 это уже изменение данных.
Передавайте исходное значение через append() или set(). При сериализации API сам закодирует плюсы как %2B:
const params = new URLSearchParams()
params.append("bin", "E+AXQB+A")
params.toString() // "bin=E%2BAXQB%2BA"encodeURIComponent() перед добавлением значения: знак процента закодируется ещё раз. И не передавайте конструктору весь URL. Для полного адреса создайте URL и используйте его searchParams. 📎 Примеры кодирования в MDN.22 248
Что проверять перед обработкой postMessage от iframe
Сообщение от встроенного виджета не становится доверенным только потому, что пришло через
postMessage(). Страница должна проверить, кто его прислал и что именно предлагается сделать.
На отправке задайте точный targetOrigin, если адрес получателя известен: со схемой, хостом и нужным портом. На приёме сравните event.origin с ожидаемым origin. Если важен конкретный iframe, проверьте и event.source. Это помогает отличить нужное окно от других отправителей.
После этого проверьте структуру и допустимые значения event.data. Правильный origin не гарантирует корректность содержимого. И сохранённая ссылка на окно не гарантирует, что оно всё ещё открыто на прежнем адресе. 📎 Правила безопасного обмена в MDN.22 248
Почему многоточие не спасает длинное имя во flex-строке
У имени уже стоят
white-space: nowrap, overflow: hidden и text-overflow: ellipsis, но строка всё равно растягивается и выталкивает соседнюю кнопку. Проверять нужно не только сам текст.
В примере Ахмада Шадида заголовок лежит внутри .user__meta, а flex-элементом является именно эта обёртка. Её автоматическая минимальная ширина мешает сжатию. Автор задаёт min-width: 0 на .user__meta, оставляя свойства обрезки на заголовке.
Так контейнеру разрешают уменьшиться, а тексту задают способ показать нехватку места. Это разные задачи. Если полное имя важно для выбора пользователя, вместо обрезки может понадобиться перенос. 📎 Разбор с HTML и CSS показывает именно этот случай.22 248
Откуда берётся цикл в ResizeObserver
ResizeObserver следит за размерами элемента, а не только окна. Если в его callback увеличить ширину того же элемента, изменение может вызвать следующее уведомление. Получается цикл, который сам не закончится.
Браузер переносит часть уведомлений на следующий кадр и сообщает ResizeObserver loop completed with undelivered notifications. Это защита от зависания браузера, а не исправление логики. Правило «при каждом уведомлении добавить ещё 10 пикселей» продолжит увеличивать элемент.
Проверьте, есть ли у изменения конечное состояние. Например, можно хранить ожидаемый размер и не задавать его повторно, когда элемент уже до него дошёл. Один requestAnimationFrame() лишь переносит работу и не устраняет бесконечное изменение. 📎 Разбор ошибок наблюдения в MDN.22 248
Knip ищет код, который больше никто не использует
Удалили экран, а его зависимости и вспомогательные файлы остались в проекте. Найти их поиском по одному имени трудно: экспорт может ссылаться на другой экспорт, а точка входа находиться в конфигурации инструмента.
Knip проверяет JavaScript- и TypeScript-проект целиком и ищет неиспользуемые файлы, экспорты и зависимости. Анализ начинается с точек входа. Плагины помогают учитывать устройство проекта и то, как файлы подключают фреймворки, сборщики и тестовые инструменты.
Отчёт стоит использовать как список кандидатов на уборку. Перед удалением проверьте точки входа и неявное использование, которое анализатор мог не учесть. Само попадание в список ещё не доказывает, что файл можно безопасно стереть. 📎 Репозиторий Knip и документация.
22 248
Repost from Нейроканал
Две критические уязвимости в PHP, обновляйтесь срочно. Специально собранными HTTP-запросами без логина можно выполнить на сервере любой код с правами PHP-воркера. Рабочий взлом уже показали на WordPress, Drupal, Joomla, Laravel, Symfony, Nextcloud, Magento и phpMyAdmin.
Исправления вышли в PHP 8.5.12, 8.4.27, 8.3.36 и 8.2.35. Для 8.1 и старше релизов не будет: есть минимальные патчи к исходникам 7.4, 8.0 и 8.1 и пакеты от дистрибутивов и LTS-поставщиков. Уязвимые пути тянутся с PHP 5.4, сильнее всего под ударом Apache с mod_php, но FPM тоже уязвим.
Если обновиться прямо сейчас нельзя, команда PHP советует задать
session.upload_progress.enabled=0 в php.ini или конфиге пула, на 8.5 ещё fatal_error_backtraces=0, и перезапустить все воркеры. Против второй ошибки снизить post_max_size и ограничить на прокси размер и число частей запроса, включая запросы без Content-Length. Это только снижает риск.
Детали утекли за день до релиза, и атаки уже идут: Cloudflare видит попытки эксплуатации и включила правила WAF даже на бесплатном тарифе. Wiz советует искать в логах необычные multipart-запросы, после которых идут ошибки лимита памяти или серии ответов 500. И проверьте бэкапы.
Нашли уязвимости с помощью ИИ: Calif в программе OpenAI Patch the Planet с GPT-5.6 Sol и независимо Wiz с Gemini 4 Argon и GPT-5.6 Sol. Подробности и инструкции на официальном сайте PHP.
@neuro_channel22 248
scrollbar-gutter убирает сдвиг при появлении скроллбара
Список получил ещё несколько строк, появилась полоса прокрутки, и контент немного уехал в сторону. С классическим скроллбаром это происходит потому, что он занимает часть ширины контейнера.
scrollbar-gutter: stable резервирует для него место заранее, даже когда переполнения ещё нет. Это работает при overflow: auto, scroll или hidden. Если нужна симметрия, stable both-edges добавляет такой же отступ у противоположного края по строчной оси.
Свойство управляет местом, а не оформлением полосы. При overlay-скроллбарах, которые лежат поверх контента, резерв не создаётся. Поэтому на разных ОС результат будет отличаться, а старые браузеры стоит проверить отдельно. 📎 Примеры обоих режимов в MDN.22 248
Как отправить форму из JavaScript с проверкой полей
Если вызвать
form.submit(), форма уйдёт без обычной проверки полей и события submit. Это легко пропустить, когда отправка запускается из отдельной кнопки или после другого действия в интерфейсе.
form.requestSubmit() запускает сценарий отправки через submit-кнопку: браузер проверяет ограничения полей и при успешной проверке вызывает submit. Можно передать конкретную кнопку. Она должна принадлежать форме, а её form*-атрибуты могут переопределить параметры отправки.
Есть оговорка: novalidate у формы и formnovalidate у кнопки меняют поведение проверки. И клиентская валидация всё равно не заменяет серверную. 📎 Разница между двумя методами в MDN.22 248
Горячие клавиши для демо можно показывать прямо во вкладке
Системная утилита выводит нажатия поверх рабочего стола. Но при демонстрации только одной вкладки зрители могут не увидеть этот слой.
Брамус сделал веб-компонент `<show-keystrokes>`. Он рисует сочетания клавиш внутри самой страницы, по умолчанию показывая горячие клавиши и навигационные кнопки, без обычного набора текста.
Всплывающий слой использует Popover API, поэтому не прячется за соседними элементами. CSS Anchor Positioning размещает его в углу или рядом с курсором и помогает переворачивать расположение у края окна.
Есть настройки оформления, режим всех нажатий, bookmarklet и расширение для подключения на чужих сайтах. При записи демонстрации полезно проверить, какой режим включён, прежде чем вводить данные.
22 248
Как назвать компонент, чтобы команда понимала одно и то же
Box почти ничего не говорит о назначении. Название по цвету или месту на экране быстро устаревает, когда компонент переносят или меняют тему.
В подборке Виталия Фридмана собраны подходы и справочники для названий компонентов, классов, цветов и дизайн-токенов.
Для интерфейсных элементов есть Component Gallery: примеры из реальных дизайн-систем и альтернативные названия одного компонента. Для классов и функций — Classnames со словами, сгруппированными по поведению, порядку и связям.
Общая рекомендация к именам: понятная структура, конкретный смысл и знакомый команде словарь. Для названий пользовательских функций автор советует сначала узнать, какими словами люди сами описывают задачу и ожидаемый результат.22 248
Как Next.js разобрал полторы тысячи старых issues
Старый отчёт может описывать актуальный баг. Или уже исправленный. Одной даты последнего комментария недостаточно, чтобы решить, пора ли его закрывать.
Команда Next.js создала исследовательского агента `closability`. В отдельной песочнице он читает обсуждение, ищет связанные изменения и при необходимости запускает воспроизведение на разных версиях фреймворка.
На выходе — заключение со ссылками на доказательства. Агент не может сам комментировать, закрывать issues или отправлять код; результаты проверяют мейнтейнеры.
За описанный период в репозитории закрыли 1462 отчёта, включая часть вне этого разбора. Среди причин были уже внесённые исправления, дубликаты и ожидаемое поведение. Это уборка и проверка backlog, а не 1462 новых исправления ошибок.
22 248
Почему запись глубины в шейдере может заставить GPU делать лишнюю работу
GPU умеет отбрасывать скрытые фрагменты до запуска дорогого фрагментного шейдера. Но если шейдер сам меняет глубину, драйверу трудно понять заранее, останется ли такая оптимизация корректной.
В обзоре WebGPU для Chrome 155–156 показано расширение WGSL
fragment_depth. Режимы less и greater позволяют явно описать отношение выходной глубины к интерполированной. Это даёт GPU информацию для сохранения ранней проверки глубины.
Наличие расширения проверяется через navigator.gpu.wgslLanguageFeatures. В коде шейдера автор рекомендует явно указать requires fragment_depth;.
Это возможность для конкретного графического алгоритма. Перед использованием нужны проверка поддержки и замеры на целевых устройствах.22 248
Как закончить фон целым узором, даже если высота блока меняется
Повторяющийся фон обрезается снизу, потому что текст задаёт произвольную высоту секции.
background-repeat: round убирает обрезку, но меняет размер самих плиток.
Ахмад Шадид предлагает округлять высоту блока. calc-size() получает размер, рассчитанный для auto, а round(up, …) увеличивает его до ближайшего значения, кратного высоте узора.
Так при переносе текста меняется высота секции, а размер рисунка остаётся прежним. В статье разобраны внутренние отступы и разница между округлением вверх и вниз: уменьшение высоты может оставить контенту слишком мало места.
На момент публикации автор отмечает поддержку решения только в Chrome. Для остальных браузеров стоит сохранить обычную автоматическую высоту как базовый вариант.22 248
Nuxt вводит собственный серверный API поверх Nitro
Серверный код Nuxt-проекта часто импортирует функции из
h3 и nitropack. Когда эти зависимости меняют API, обновление затрагивает и приложение, и модули экосистемы.
В Nuxt 4.6 появился `nuxt/server`. Фреймворк предоставляет свои серверные утилиты и типы: события запроса, правила маршрутов и типизированный $fetch.
Это даёт Nuxt возможность адаптироваться к изменениям нижележащих библиотек за собственным интерфейсом. В статье команда объясняет, как такой слой упрощает дальнейший переход к Nitro 3 и h3 2.
Nitro остаётся серверной реализацией по умолчанию. Альтернатива @nuxt/vite-server пока экспериментальная, и команда по-прежнему рекомендует Nitro большинству проектов.