Будни разработчика

Открыть в Telegram

Блог Lead JS-разработчика Автор: @bekharsky По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv Чат: https://t.me/htmlshitchat №5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978

Больше

Россия46 455 Технологии и приложения9 014...

📈 Аналитический обзор Telegram-канала Будни разработчика

Канал Будни разработчика (@htmlshit) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 14 228 подписчиков, занимая 9 014 место в категории Технологии и приложения и 46 455 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 14 228 подписчиков.

Согласно последним данным от 28 июня, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -158, а за последние 24 часа — -3, при этом общий охват остаётся высоким.

Статус верификации: Не верифицирован
Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 11.03%. В первые 24 часа после публикации контент обычно набирает 5.73% реакций от общего числа подписчиков.
Охват публикаций: В среднем каждый пост получает 1 570 просмотров. В течение первых суток публикация набирает 816 просмотров.
Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 13.
Тематические интересы: Контент сосредоточен на ключевых темах, таких как css, api, scroll, --fade, bottom.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Блог Lead JS-разработчика Автор: @bekharsky По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv Чат: https://t.me/htmlshitchat №5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978”

Благодаря высокой частоте обновлений (последние данные получены 29 июня, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

14 228

Подписчики

-324 часа

-367 дней

-15830 день

1 570

Просмотры поста

~ 81624 часа

~ 1 04348 часов

11.03%

Коэффициент вовлеченности

~ 1

Постов в день

Ads index

beta

Загрузка данных...

Похожие каналы

14.3K

For Web — фронтенд, дизайн, программирование

10.8K

Frontend Interview - собеседования по Javascript / Html / Css

Dev News от Максима Соснова

Больше каналов

Входящие и исходящие упоминания

---

Привлечение подписчиков

июнь '26

+35

в 1 каналах

май '26

+114

в 0 каналах

Get PRO

апрель '26

+190

в 0 каналах

Get PRO

март '26

+215

в 17 каналах

Get PRO

февраль '26

+238

в 1 каналах

Get PRO

январь '26

+155

в 0 каналах

Get PRO

декабрь '25

+124

в 15 каналах

Get PRO

ноябрь '25

+530

в 10 каналах

Get PRO

октябрь '25

+95

в 6 каналах

Get PRO

сентябрь '25

+203

в 21 каналах

Get PRO

август '25

+77

в 0 каналах

Get PRO

июль '25

+251

в 6 каналах

Get PRO

июнь '25

+451

в 6 каналах

Get PRO

май '25

+127

в 6 каналах

Get PRO

апрель '25

+364

в 18 каналах

Get PRO

март '25

+204

в 11 каналах

Get PRO

февраль '25

+253

в 7 каналах

Get PRO

январь '25

+193

в 11 каналах

Get PRO

декабрь '24

+329

в 2 каналах

Get PRO

ноябрь '24

+524

в 10 каналах

Get PRO

октябрь '24

+306

в 7 каналах

Get PRO

сентябрь '24

+243

в 13 каналах

Get PRO

август '24

+384

в 13 каналах

Get PRO

июль '24

+496

в 12 каналах

Get PRO

июнь '24

+363

в 7 каналах

Get PRO

май '24

+978

в 3 каналах

Get PRO

апрель '24

+475

в 22 каналах

Get PRO

март '24

+223

в 1 каналах

Get PRO

февраль '24

+402

в 9 каналах

Get PRO

январь '24

+454

в 18 каналах

Get PRO

декабрь '23

+240

в 3 каналах

Get PRO

ноябрь '23

+258

в 2 каналах

Get PRO

октябрь '23

+238

в 7 каналах

Get PRO

сентябрь '23

+339

в 0 каналах

Get PRO

август '23

+341

в 0 каналах

Get PRO

июль '23

+352

в 0 каналах

Get PRO

июнь '23

+404

в 0 каналах

Get PRO

май '23

+211

в 0 каналах

Get PRO

апрель '23

+233

в 0 каналах

Get PRO

март '23

+323

в 0 каналах

Get PRO

февраль '23

+216

в 0 каналах

Get PRO

январь '23

+143

в 0 каналах

Get PRO

декабрь '22

+219

в 0 каналах

Get PRO

ноябрь '22

+201

в 0 каналах

Get PRO

октябрь '22

+853

в 0 каналах

Get PRO

сентябрь '22

+306

в 0 каналах

Get PRO

август '22

+604

в 0 каналах

Get PRO

июль '22

+1 137

в 0 каналах

Get PRO

июнь '22

+1 040

в 0 каналах

Get PRO

май '22

+1 241

в 0 каналах

Get PRO

апрель '22

+472

в 0 каналах

Get PRO

март '22

+767

в 0 каналах

Get PRO

февраль '22

+315

в 0 каналах

Get PRO

январь '22

+163

в 0 каналах

Get PRO

декабрь '21

+608

в 0 каналах

Get PRO

ноябрь '21

+93

в 0 каналах

Get PRO

октябрь '21

+341

в 0 каналах

Get PRO

сентябрь '21

+530

в 0 каналах

Get PRO

август '21

+383

в 0 каналах

Get PRO

июль '21

+753

в 0 каналах

Get PRO

июнь '21

+1 449

в 0 каналах

Get PRO

май '21

+354

в 0 каналах

Get PRO

апрель '21

+1 799

в 0 каналах

Get PRO

март '21

+384

в 0 каналах

Get PRO

февраль '21

+409

в 0 каналах

Get PRO

январь '21

+1 391

в 0 каналах

Get PRO

декабрь '20

+706

в 0 каналах

Дата	Привлечение подписчиков	Упоминания	Каналы
29 июня	0
28 июня	0
27 июня	0
26 июня	+2
25 июня	+1
24 июня	0
23 июня	+5
22 июня	+2
21 июня	0
20 июня	+1
19 июня	+1
18 июня	+2
17 июня	+2
16 июня	0
15 июня	+1
14 июня	0
13 июня	+1
12 июня	+2
11 июня	0
10 июня	0
09 июня	0
08 июня	0
07 июня	+1
06 июня	0
05 июня	+2
04 июня	+4
03 июня	+3
02 июня	+2
01 июня	+3

Посты канала

«Под капотом: мультиклауд» — облачный митап от MWS Cloud Platform 📅 16 июля 📍 Москва, Лесная ул., 20, стр. 3 Крыша «Депо на Лесной» 💰 Бесплатно, но требуется регистрация Что разберём: • Мультиклауд: мифы, реальность, прикладные сценарии. • Архитектуры: бэкапы, сети (VPN / Interconnect), Disaster Recovery, IAM, аудит, IaC • Terraform-провайдер MWS: генерация из OpenAPI, качество, Open Source Спикеры — руководитель продуктового направления, архитектор и ведущий разработчик MWS Cloud Platform. Вход бесплатный, но требуется регистрация и её подтверждение — количество мест ограничено Регистрация — по ссылке

2	#библиотека дня Есть небольшая библиотека для undo/redo в JavaScript: async-history-stack. Она интересна не тем, что «умеет откатывать состояние». Это как раз самый простой случай. Интереснее другое: в историю можно складывать действия, у которых есть асинхронные операции и побочные эффекты. Например, пользователь удаляет картинку из галереи. В реальном приложении это может быть не один setState, а целая цепочка: уйти со страницы картинки, отправить запрос на удаление, убрать ссылку из локального состояния, обновить интерфейс. А при undo надо сделать обратное: восстановить картинку, вернуть ссылку в состояние и снова открыть страницу этой картинки. async-history-stack предлагает описывать такие действия через push: функция сразу выполняет изменение и возвращает функцию, которая умеет это изменение откатить. await historyStack.push(async () => { await applyChanges() return async () => { await revertChanges() } }) То есть в историю кладётся не снимок объекта, а переход туда-обратно. Благодаря этому undo/redo может быть не привязан к конкретному стору и нормально покрывает навигацию, RPC, работу с файлами и другие асинхронные штуки. В библиотеке есть undo, redo, clear, size, timestamp, лимит истории, отмена через signal и merge, чтобы склеивать несколько изменений в одну запись. Например, когда много мелких действий должны откатываться одним undo. Я набросал демо: галерея, удаление карточки, имитация асинхронного RPC, лог операций, undo/redo и восстановление маршрута. Ну и да, вместо обычных заглушек там процедурно генерируются SVG-паркеты, потому что почему бы и нет. Ссылка на библиотеку: https://github.com/kettanaito/async-history-stack Демо: https://codepen.io/editor/alinaki/pen/019f1263-8e38-73da-a864-9854b6093cee Всем undo, котаны! #history #undo #library #svg #tile	615
3	#статья дня Не так давно в чате канала проскочил вопрос, как правильно делать контейнеры, которые могут вылезать за визуальные границы. Например, основной контент находится посредине и занимает в ширину 80-120 приятных для чтения глазу символов, а вот картинки хотелось бы разнести до краёв. Техника называется full bleed. Я не знаю, как точно перевести. Если посмотрите видео, то виден ещё один вариант использования, когда галерея выходит за пределы экрана лишь с одной стороны, но дальше тем не менее границы игнорирует. Вот так: https://codepen.io/hexagoncircle/pen/gOWjwme Альтернативный вариант: https://codepen.io/maartenbruggink/full/eYWjxae Раньше такое делалось жонглированием полями, теперь же у нас есть гриды. И у небезызвестного Джоша Комо есть статья как раз об этом: https://www.joshwcomeau.com/css/full-bleed/ Тем не менее, я рекомендую посмотреть приложенные кодпены, поскольку в них зоны грида именуются и становится понятнее, что к чему. Всем full bleed, котаны! #css #fullbleed #gallery #бородач	941
4	Вышел anime.js 4.5.0. Anime.js — это JavaScript-библиотека для анимаций. Её часто используют для DOM, CSS-свойств, SVG, таймлайнов и обычных JS-объектов: когда нужна не одна transition, а нормальное управление движением, задержками, easing’ами и последовательностями. В 4.5.0 появился API адаптеров. Если коротко, теперь anime.js можно научить работать с объектами, которые устроены не как DOM-элементы. Главный пример в этом релизе — встроенный адаптер для Three.js. В Three.js анимация часто требует писать во вложенные свойства объекта: mesh.position.x = 100 mesh.rotation.y = Math.PI / 4 mesh.material.opacity = 0.5 mesh.material.color.set('#ff8844') С адаптером это можно описывать прямо в animate(): animate(mesh, { x: 100, rotateY: 45, opacity: 0.5, color: '#ff8844', }) Адаптер сам сопоставляет параметры с position, rotation, material, цветом и другими свойствами Three.js. Появился и более привычный для фронтендера синтаксис 3D-трансформаций: rotateX, rotateY, rotateZ, scale, transformOrigin, плюс skewX, skewY, skewZ. Материалы тоже стало анимировать проще. Цвет можно передавать строкой — hex, rgb, hsl или CSS-переменной — без ручного перекладывания в THREE.Color. Ещё одна хорошая часть — instanced mesh. Объекты, которые в Three.js обычно используются для большого количества одинаковой геометрии, теперь можно анимировать почти как обычные меши. Для сцен с сетками, частицами, волнами и кучей повторяющихся элементов это сильно сокращает ручной код. В stagger() добавили поддержку 3D: теперь задержки можно раскладывать не только по x и y, но и по z. Плюс появились jitter и seed, чтобы делать разброс в движении, но при этом получать повторяемый результат. Остальные изменения — в changelog: фиксы timeline, keyframes, seek, reversed loops, render engine, работа с цветами и разные мелкие правки. Важная деталь: сайт anime.js теперь тоже портирован на новый API с Three.js-адаптером. То есть это не просто пример в документации, а уже основа для собственного сайта проекта. Получился релиз, после которого anime.js заметно лучше ложится на 3D-сцены. Да здравствуют описания анимаций без постоянного ручного прохода по position, rotation, material и прочим внутренним полям. #animejs #animation #threejs	1 554
5	🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.	1 387
6	#ссылка дня Когда-то давным давно поддержки кастомных шрифтов в браузерах толком не было, а желание сделать красиво — было. Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick. К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: https://www.drupal.org/project/textimage Просто зачастую нет никакого смысла тащить целый шрифт на фронт ради пары заголовков. Да и даже его часть — тоже. Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде https://opentype.js.org/ или FontForge в командном режиме, но каждый ли проект в этом нуждается? А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок. Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE). Забавное было время, конечно, но иногда лучше и правда сгенерировать картинку, чем тащить весь шрифт целиком. #font #old	1 509
7	+8 RYBE — одежда с твоим языком программирования Мы захотели объединить людей, у которых одни интересы. В метро, на прогулке, в офисе, на конференции, в походе, в баре, в самолёте. В каком-то смысле это мерч для твоего языка программирования А еще мы добавили функциональность: люверсы для крепления пропуска, карман для наушников, салфетка для очков внутри кармана, карман для телефона. Отшиваемся в Москве, используем супер плотный, премиальный хлопок и качественную фурнитуру. Выбирай свой язык, заказывай, дари, носи сам: https://tglink.io/8040b286843e7a?erid=2W5zFGDdQTb Наш tg: @rybe_store	788
8	#такое дня Как выбесить коллег одной строкой? А сейчас я покажу вам... Автор	1 583
9	#новость дня В HTTP появился (точнее, вот-вот появится, только RFC приняли) новый метод QUERY. Примерно такой: QUERY /search Content-Type: application/json { "q": "foo", "limit": 10, "sort": "-published" } И самое интересное тут даже не то, что теперь можно отправлять сложный поисковый запрос в теле HTTP-запроса. Самый интересный вопрос: а разве мы не могли делать это через GET? Могли. Иногда даже делали. GET /search Content-Type: application/json { "q": "foo", "limit": 10, "sort": "-published" } На уровне HTTP-сообщения тело у GET возможно. Протокол не развалится только потому, что после заголовков пришёл body. Проблема в другом: у тела GET нет нормальной общей семантики. Стандарт не говорит: «тело GET — это параметры запроса». Сервер и клиент могут между собой так договориться, но для остальной инфраструктуры это будет частная магия. Прокси, CDN, кэши, балансировщики, библиотеки и браузерные API не обязаны понимать такой договор. Поэтому GET с body — это поведение из серии “может работать в нашей связке”. Где-то пройдёт, где-то тело проигнорируют, где-то запрос завернут, а где-то его вообще нельзя будет отправить. Например, браузерный fetch не разрешает body у GET и HEAD. QUERY как раз стандартизирует этот сценарий. QUERY /search Content-Type: application/json { "q": "foo", "limit": 10, "sort": "-published" } Смысл метода: это запрос на чтение, но параметры запроса лежат в теле. То есть больше не нужно притворяться, что сложный фильтр — это короткая строка query-параметров, и не нужно использовать POST там, где состояние на сервере не меняется. От POST отличие тоже важное. POST для HTTP-инфраструктуры выглядит как метод с возможными побочными эффектами. QUERY, наоборот, описан как safe и idempotent: его можно повторить, не ожидая, что повтор сам по себе что-то создаст или изменит. Получается, QUERY — это не «GET с body», а нормальный стандартный способ сказать: тело запроса важно, оно описывает выборку, и сам запрос при этом остаётся запросом на чтение. #http	2 013
10	Как правильно работать с резервным копированием в облаке? 25 июня приглашаем на бесплатный вебинар от MWS Cloud Platform всех, кто работает с облаками. Развеем мифы, разберём лучшие современные подходы и инструменты. Обсудим интеграцию в процессы, консистентность, точечное восстановление и безопасность. Поговорим о плюсах нативных облачных инструментов. Проведём демо в MWS Cloud Platform и ответим на ваши вопросы. Зарегистрируйтесь, чтобы не пропустить! ⏰ 25 июня в 14:00 (мск) Зарегистрироваться	1 596
11	#статья дня Команда Chrome предложила довольно необычное API для частичного обновления HTML. В разметке можно оставить специальный маркер: <div> <?marker name="placeholder"> </div> Браузер игнорирует <?marker>, поэтому такой код уже сейчас работает как обычный HTML. Позже, когда данные будут готовы, достаточно добавить: <template for="placeholder"> Here is some <em>HTML content</em>! </template> После этого содержимое шаблона автоматически займёт место маркера. На практике это означает, что сервер может начать отдавать страницу ещё до того, как готовы все данные. Не нужно искать элементы по id, не нужно писать код для замены заглушек, не нужно придумывать собственный протокол поверх HTML. Несколько лет назад стриминг HTML ассоциировался почти только с React. Штош. Самое приятное, что <?marker> — не какой-то новый синтаксис. Processing instructions существуют ещё со времён XML, а браузеры уже умеют спокойно пропускать их в HTML. Поэтому использовать такую разметку можно хоть сегодня. Для старых браузеров есть полифилл от Google Chrome Labs. Статья: https://developer.chrome.com/blog/declarative-partial-updates Полифилл: https://github.com/GoogleChromeLabs/template-for-polyfill #html	1 361
12	Проект от подписчика! Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать. Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать! Всем привет! Меня зовут Роман, я фуллстек-разработчик, 5+ лет в вебе — фриланс и работа в команде, в основном фронтенд. Давно читаю «Будни разработчика», так что вдвойне приятно оказаться здесь уже со своим материалом. Хочу рассказать про инструмент, который сделал под собственную боль и которым теперь пользуюсь сам каждый день. Когда верстаешь адаптив, постоянно скачешь между десктопом и мобильной версией: то DevTools в режиме устройства, то ресайз окна, то открыть на телефоне. Десктоп и мобайл при этом никогда не видны вместе — один прячется, когда смотришь на другой. А показывать заказчику «узкое окно браузера» по видеосвязи — так себе демонстрация. Готовые симуляторы есть (Mobile First, U-eyes и другие — со своей задачей справляются). Но почти все открывают превью в отдельном окне или своей области. Мне же нужно было другое: рамка телефона прямо поверх десктопной страницы, на той же вкладке, одновременно с ней. Не нашёл такого — сделал сам. 🟣 Как устроено (коротко по технике) Страница внутри себя. Очевидный путь — iframe с тем же URL, сужённый до ширины телефона. Но большинство сайтов отдают X-Frame-Options и CSP: frame-ancestors, и iframe просто не грузится. Через declarativeNetRequest (MV3) динамически срезаю X-Frame-Options, вырезаю только директиву frame-ancestors из CSP (остальной CSP не трогаю) и подменяю User-Agent на мобильный. Правило живёт только пока открыто превью, привязано к конкретной вкладке, ничего не блокируется и не отправляется — меняются лишь заголовки ответа. Изоляция стилей. Весь UI оверлея (рамка, панель, кнопки) — в Shadow DOM, чтобы CSS сайта и расширения не ломали друг друга. Синхронизация. Скролл, клики и ввод проксируются между десктопом и превью — заполняешь форму на десктопе, видишь, как она заполняется в телефоне. Самое муторное — маппинг элементов и защита от бесконечных циклов событий. 🟣 Скриншоты снимаются и обрезаются локально, сохраняются файлом — ничего никуда не грузится. 🟣 Запись экрана. Честно про текущее состояние: в опубликованной версии работает штатным путём — через диалог захвата экрана браузера, видео кодируется локально (WebM и MP4, MP4 пока тестово). Параллельно допиливаю бесшовный вариант без промпта на расшаривание (chrome.tabCapture + getUserMedia в offscreen, перекодирование через WebCodecs + mp4/webm-muxer) — но это пока в разработке. 🟣 Приватность как ограничение архитектуры. Нет бэкенда, аналитики и удалённого кода. Настройки — в chrome.storage.local, не покидают устройство. Разрешения в манифесте — ровно под задачу. Итог: Mobile View — десктоп и мобайл одновременно на вкладке, синхронизация, скриншоты, запись. Бесплатно, лежит в Chrome Web Store. Буду рад любому фидбэку. И если найдёте баги на своей ОС/версии браузера — напишите подробно, по возможности со скрином или записью: веду проект в одиночку, так баги фиксятся куда быстрее. Chrome Web Store: https://chromewebstore.google.com/detail/mobile-view-%E2%80%94-mobile-simu/hocbjiaeeijekejepphjihbpogikmofh Сайт: https://mobileview.app Статья на Хабре: https://habr.com/ru/articles/1047354/	1 247
13	#фишка дня Таблица до сих пор превосходит все попытки её имитировать по очень простой причине: если скопировать её из браузера, она спокойно вставится в Excel или Google Sheets как нормальный диапазон. Но вот обратное направление не работает. Скопировал диапазон из Sheets — а в браузере всё рассыпалось в текст, будто ничего и не было. Иногда это мешает: есть форма с табличкой на сайте, есть данные в Google Sheets, и единственное желание — просто вставить их туда, не перепечатывая по ячейке. Чтобы привычный Ctrl+V вёл себя так же естественно, как в Excel. Для таких случаев можно сделать маленькую, но удобную вещь — ловить событие вставки и парсить табличные данные из буфера, распределяя их по нужным полям: document.addEventListener("paste", function (e) { const text = e.clipboardData.getData("text"); const rows = text.trim().split(/\r?\n/).map(r => r.split("\t")); const inputs = [...document.querySelectorAll("input")]; let index = 0; for (const row of rows) { for (const cell of row) { if (inputs[index]) { inputs[index].value = cell; index++; } } } e.preventDefault(); }); Так можно взять диапазон в Google Sheets, нажать Ctrl+V в браузере — и данные разложатся по ячейкам формы, словно это штатная функция. Я пример забыл, а вы и молчите: https://codepen.io/alinaki/pen/KwzvEeX #js #table	1 235
14	Приглашаем на доклад о PT Application Inspector и PT BlackBox на Product Backstage* 17 июня, 16:20 МСК Онлайн Новый AppSec*: улучшенная архитектура PT Application Inspector и динамический краулер в PT BlackBox Спикер: руководитель продуктов Сергей Синяков О каких обновлениях будем рассказывать: PT Application Inspector: - архитектурные изменения платформы; - поиск секретов и подозрительной логики в коде c помощью ML-модели MOLOT; - анализ конфигурационных файлов; - продвинутая защита 1С; - управление очередью сканирований. PT BlackBox: - динамический краулер для современных веб-приложений; - инженерные задачи быстро меняющегося ландшафта угроз. 📝Зарегистрироваться Продуктовое закулисье **Безопасность приложений	1 365
15	#статья дня Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему. Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://t.me/htmlshit/806), только теперь в анимации. Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация! Есть два способа это обойти: 1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую. 2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом. В итоге получается ровная и предсказуемая смена цвета без серых провалов. Статья: https://www.joshwcomeau.com/animation/color-shifting/ #css #color #animation	1 414
16	#заметка дня Итак, на работе выдали новые ноутбуки тем, чьи машины в лизинге уже три года и более. Вот только есть нюанс. Мой побитый M2 Pro нём на борту 32 Гб оперативной памяти, а новенький M5 Pro — только 24. Как-то нехорошо. У компании, конечно, свои интересы в ограничении максимальной конфигурации, но получили что получили. Людям, работающим с тяжёлыми задачами выдали модели на 48 Гб, то есть, возможность что-то доказать имеется. Но я сюда не ныть пришёл, хотя очень хочется. Любые ограничения это повод пересмотреть работу. И одним из таких пересмотров, конечно же, стала сборка Webpack, которая в пике сжирает 11 гигабайт. Планирую заменить на Rspack, хоть там есть и свои нюансы. Самый главный нюанс — продать это стафф-инженеру. Но поговорить я даже не об этом хотел. У коллеги новый такой же ноутбук резко начал выть кулерами, и причина была не очень ясна. Потребление памяти в пике всё ещё не упирается в лимит, свопится не очень сильно. А воет. А воет, потому что процесс rg — знаменитый инструмент поиска ripgrep — забивал 8 ядер процессора под завязку и останавливаться не собирался. Попросил коллегу показать мне её расширения для Cursor (VS Code). И там, конечно, было очень красиво. 34 расширения с её учебных дней, от разных иконок и сниппетов до подсветки классов. Запустили Extensions Bisect — я писал об этой встроенной в VS Code утилите не так давно, она позволяет найти расширение, которое вызывает глюки редактора или прочие странные эффекты — вот вроде пожирания ресурсов ripgrep-ом. И такое расширение нашлось! Им оказалось популярное IntelliSense for CSS class names in HTML. Что заставило его сожрать все ресурсы и почему это не проявлялось на предыдущей машине — вопрос остаётся открытым. Да и не нужно оно в большинстве случаев. В общем, я рад тишине в офисе, наконец. #rg #vscode	2 063
17	«Давай голосом на 5 минут» — и встреча идёт уже час Эту боль давно ощущают продуктовые команды: до 10 часов в неделю уходит на встречи, которых могло бы не быть. Асинхронный формат даёт возможность обсудить задачу, показать фичу, объяснить правки или быстрее изучить документацию. Хотите научиться выстраивать асинхронные коммуникации в команде? Тогда присоединяйтесь к вебинару с Антоном Гуриным, CPO MWS TeamStream. В эфире обсудим: ⚫️Что поможет сократить количество ненужных встреч и избежать хаоса ⚫️Как обсуждать задачи, правки и фичи асинхронно ⚫️Где и как фиксировать все договорённости и решения ⚫️Какие процессы можно уже сегодня перенести в асинхронный формат Кому будет полезно: тимлидам, продакт-менеджерам, системным аналитикам, дизайнерам и архитекторам. 📅 17 июня в 16:00 👉 Регистрируйтесь по ссылке	1 840
18	#такое дня GDPR помните? В РФ его аналог 152-ФЗ, правда, реализация чуть другая. Ну, короче, это та штука, которая заставляет бедных-несчастных бизнесменов просить у вас разрешение на сбор ваших данных путём демонстрации убогих куки-банеров. Мы сейчас опустим тот факт, что это даже не всегда нужно, что простые куки авторизации и даже анонимной аналитики и мониторинга не всегда означают слежение и, стало быть, баннеры не нужны. Но мало кто хочет разбираться в нюансах, а штрафы большие. А вот следить за вами — хотят. Вот такой вот метод (на иллюстрации) отложенного принятия решения по сбору преддложила некая девушка, пост которой попался мне в ленте линкедина. Классический JS-шаблон: указываем тип скрипта как text/template или text/plain и он не выполняется браузером, но текстовое содержимое ноды доступно и легко можно запустить в нужный момент. Красиво? Не то слово, вот только... Вот только Google Tag Manager это буквально оркестратор! С его помощью и можно было бы показать баннер, принять решение по включению аналитики и так далее и тому подобное. И вся эта обвязка вокруг шаблона с кастомным кодом была бы не нужна. Но некоторые люди почему-то не любят искать простые решения. Штош. #gdpr #cookie #gtm	1 754
19	#статья дня Яндекс подвёл итоги грантовой программы Yandex Open Source — и там неожиданно много не просто «полезных тулз», а вполне серьёзной AI- и developer-инфраструктуры. Например, среди победителей есть AI Router — прокси для маршрутизации запросов между OpenAI, Gemini, Anthropic и другими LLM. С балансировкой нагрузки, rate limiting и даже встроенным аналогом Fail2Ban для защиты от подозрительных запросов. По сути, единая точка входа для работы с разными моделями. Ещё из интересного — RAGU. Это GraphRAG-движок, который строит графы знаний по документам: вытаскивает сущности, связи, дедуплицирует узлы и позволяет комбинировать локальный, глобальный и векторный поиск. То есть уже не просто «чатик поверх PDF», а полноценная retrieval-инфраструктура. Ну и отдельно понравился langchain-localai — пакет для тех, кто гоняет LLM локально или в закрытом контуре. Авторы переписали коннекторы на новый OpenAI SDK, добавили нормальную асинхронность и ускорили batch-обработку эмбеддингов. Вообще, по статье хорошо видно, как open source вокруг AI постепенно смещается от «очередной модели» к инфраструктуре: routing, observability, retrieval, orchestration и tooling. Короче, AI-native DevOps уже наступает. #opensource #ai #llm #rag #devtools	1 694
20	#видео дня Наверное, это слишком жёстко для утра, но всё же: вышла документалка про C++! Думаю, C++ в рекламе не нуждается и, скорее, интересно, почему так долго. Ведь про тайпскрипт, питон, да даже кложу мы получили документалки очень давно. Что уж говорить, документалка про реакт вышла аж три года назад! Хотя казалось бы. Интересный у авторов порядок выпуска, не то слово. Я плохо знаю современный C++, мои умения остановились курсе на третьем университета. Но посмотреть историю создания и пути к стандартизации было очень интересно, горячая рекомендация. Ссылка: https://www.youtube.com/watch?v=lI7tMxzSJ7w #cpp #documentary	1 605

Посмотреть все записи