Будни разработчика
Блог Lead JS-разработчика Автор: @bekharsky По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv Чат: https://t.me/htmlshitchat №5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Mostrar más📈 Análisis del canal de Telegram Будни разработчика
El canal Будни разработчика (@htmlshit) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 14 364 suscriptores, ocupando la posición 8 989 en la categoría Tecnologías y Aplicaciones y el puesto 46 552 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 14 364 suscriptores.
Según los últimos datos del 03 junio, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -94, y en las últimas 24 horas de -2, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 11.55%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 6.68% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 1 659 visualizaciones. En el primer día suele acumular 960 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 14.
- Intereses temáticos: El contenido se centra en temas clave como css, api, scroll, --fade, bottom.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Блог Lead JS-разработчика
Автор: @bekharsky
По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv
Чат: https://t.me/htmlshitchat
№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 05 junio, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
max-height, скорее всего, ты — LLM-ка, которая застряла где-то там.
Ну буквально, только что сессию демонстрационную проводил.
Согласен, height ещё плохо анимируется в auto, хоть и появился interpolate-size. Но ведь гриды никто у нас не отбирал!
Да-да, давненько я не напоминал, что гриды прекрасно анимируются и что уже давно не нужны извращения. Но сегодня я пришёл с маленьким дополнением.
Все же в курсе, что классика — одна строка грида и 0fr ↔ 1fr?
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s ease;
}
.accordion-panel[data-open="true"] {
grid-template-rows: 1fr;
}
.panel-inner {
overflow: hidden;
min-height: 0;
}
Внутренний блок клипится — высота анимируется без max-height: 9999px.
А вот дополнение: в grid-template-rows можно и пиксели, и minmax(). Например, свёрнуто, но кусочек текста виден:
grid-template-rows: minmax(48px, 0fr); /* закрыто */
grid-template-rows: minmax(48px, 1fr); /* открыто */
Демонстрация: https://codepen.io/alinaki/pen/QwGryqN
Первый аргумент в minmax — минимум, не максимум: 48px снизу, а не «не больше 48». Полное скрытие — по-прежнему 0fr.
И да: padding на clip-слой не вешайте — только внутрь контента, иначе и под 0fr торчит, и при открытии прыгает.
#css #grid #accordionlinear(). Она появилась уже довольно давно, но в реальных проектах встречается редко — большинство по привычке ограничивается ease, ease-in-out и разными вариантами cubic-bezier().
Причина понятна: обычно linear() воспринимают как способ вручную задать несколько точек на кривой анимации. Не самый удобный инструмент и не очень понятно, зачем он вообще нужен.
Ансио показывает гораздо более интересный сценарий. Если заранее рассчитать движение какой-нибудь физической системы — например, пружины — то результат можно представить как последовательность значений и скормить её linear(). Браузер потом просто воспроизведёт эту траекторию.
.card {
transition:
transform 647ms
linear(
0, 0.04, 0.15, 0.30,
0.46, 0.59, 0.69,
0.75, 0.79, 0.80
/* ... */
);
}
Автор начинает с модели затухающей пружины, показывает уравнение, объясняет параметры системы и сопровождает всё это интерактивными примерами. Можно менять коэффициенты и сразу видеть, как меняется движение.
В общем, если у вас есть модель движения и набор точек, CSS уже умеет её воспроизводить.
Короче, linear() — это вам не это.
Ссылка ещё раз: https://www.carmenansio.com/articles/spring-physics-css
#css #easing #spring #linearinput type="number" реагирует на колесо мыши, это никогда не было проблемой, потому что браузер прекрасно понимал, когда случится прокрутка страницы и отменял событие.
Но вот, случилось что случилось: https://issues.chromium.org/issues/508306805
Демо: https://jsfiddle.net/7389xv1z
Исправление приземлится только в Chrome 150, так что если вас заденет... работаем по-старинке:
input.addEventListener('wheel', e => e.preventDefault(), { passive: false });
#chrome #bugcanvas возможность напрямую использовать результат рендера DOM-элемента.
Вот: https://wicg.github.io/html-in-canvas/
Он вводит метод drawElementImage(): ты передаёшь HTML-элемент, браузер сам делает для него layout, применяет стили и рассчитывает текст, а затем этот уже готовый результат можно рисовать в canvas.
В отличие от текущих подходов вроде html2canvas, здесь не происходит пересборки DOM в изображение вручную. Используется нативный рендеринг браузера, поэтому сохраняются точность текста, layout и поведение, которое уже есть в DOM.
В Chrome это уже можно попробовать через флаг:
chrome://flags/#canvas-draw-element
Собственно, это уже вполне себе рабочая реализация!
А в качестве примера сегодня — библиотека Liquid DOM. Ага, очередной Liquid Glass! Только очень красивый и рабочий:
https://github.com/AndrewPrifer/liquid-dom
Демо: https://liquid-dom-showcase.vercel.app/
Потрясающая штука получается. И примеров использования уже полно! Но, как обычно, ждём другие браузеры :(
#canvas #webglchrome://flags → Experimental Web Platform features.
Но уже хорошо же!
#css #text #fit
<DiffLine>
<LineNumber />
<SyntaxHighlight>
<Token />
<Token />
</SyntaxHighlight>
</DiffLine>
И конечно же:
<div
onMouseEnter={...}
onMouseLeave={...}
onClick={...}
/>
Когда таких строк 10 000+, Chrome начинает потреблять память не в себя.
А дальше случилось прекрасное: GitHub героически переоткрыл event delegation — технику, которую jQuery нормально объяснял ещё лет 15 назад. Оказалось, что один обработчик событий на контейнер внезапно быстрее, чем 30 тысяч onMouseEnter на каждую строку. Кто бы мог подумать.
Новый вариант:
<table onMouseMove={handleHover}>
<tr data-line="42">
<td>const value = 1;</td>
</tr>
</table>
function handleHover(e) {
highlight(e.target.dataset.line)
}
В итоге GitHub выкинул 74% React-компонентов, почти вдвое снизил потребление памяти и ещё удалил пару лишних <code>-тегов из каждой строки, потому что 20 000 ненужных DOM-элементов — это всё ещё 20 000 ненужных DOM-элементов.
Мораль истории максимально простая: abstraction is not free. Иногда один обработчик событий и туповатый плоский код работают лучше, чем архитектура мечты из 400 reusable-компонентов, custom hooks и трёх уровней composition.
#github #react #virtualizationscrollbar-gutter: stable можно зарезервировать место под скроллбар, не прибегая к иным методам вроде overflow: scroll (который буквально этот самый скроллбар заранее покажет, даже если он не нужен).
Демо от Ахмада Шадида в его Defensive CSS: https://defensivecss.dev/tip/scrollbar-gutter/
Can I Use: https://caniuse.com/?search=scrollbar-gutter
Поддержка в Chrome и Firefox. В Safari пока только в TP, но на Apple-устройствах скроллбары, как правило, скрыты и отображаются поверх контента, не занимая места.
Выглядит это, правда, как дополнительный паддинг, но!
Есть интересное но в виде scrollbar-gutter: stable both-edges, которое зарезервирует место под скроллбар, и такое же — на другой стороне. Что, в целом, избавит нас от разных паддингов.
Раньше за похожее решение отвечало правило overflow: overlay, но его отменили в пользу gutter.
Лучше всего это работает, впрочем, для попапов. Мало кого волнует скроллбар на тексте, а вот прыгающий body при появлении модалки — это уже перебор.
#css #scrollbar #gutter
¡Ya disponible! Investigación de Telegram 2025 — los principales insights del año 
