This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Применяя
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем
Обратите внимание,
Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#table #sticky #position #бородач
Применяя
position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем
margin-bottom на thead размером во всю высоту строки:
margin-bottom: calc(1lh + 20px);
Обратите внимание,
1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#table #sticky #position #бородач
👍7❤5🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Можно ли при помощи SVG-фильтров, не прибегая к помощи теней, экструдировать текст?
Экструзия — процесс выдавливания, как в 3D-принтере.
И да, можно! Как всегда, Ана Тюдор с прекрасным решением. На сей раз, кстати, у решения нет багов на HDR-экранах😅 Всё отображается как надо.
Кодпен: https://codepen.io/thebabydino/pen/yLmxePV
Выглядит потрясно. Матрица экструзии там отдельная песня, конечно.
#svg #filter #бородач
Можно ли при помощи SVG-фильтров, не прибегая к помощи теней, экструдировать текст?
Экструзия — процесс выдавливания, как в 3D-принтере.
И да, можно! Как всегда, Ана Тюдор с прекрасным решением. На сей раз, кстати, у решения нет багов на HDR-экранах
Кодпен: https://codepen.io/thebabydino/pen/yLmxePV
Выглядит потрясно. Матрица экструзии там отдельная песня, конечно.
#svg #filter #бородач
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2
Media is too big
VIEW IN TELEGRAM
Что будет с разработкой после первого поколения AI-инструментов
5 сентября Яндекс проведёт deep tech night — конференцию о технологических вызовах, с которыми индустрия сталкивается в эпоху AI. Не столько о самих нейросетях, сколько о том, как из-за них меняются архитектура, инфраструктура, продукты и работа разработчиков.
В программе много полезных докладов. Например, Мо Гавдат, бывший Chief Business Officer Google X, представит свой взгляд на то, как генеративные модели могут изменить разработку ПО, инженерные команды и саму роль разработчика.
Из технической части мне особенно интересны два доклада:
— «Облако в эпоху AI: архитектура платформы для гибридных агентов» Василия Ершова. Про то, как агент собирается из модели, инструментов и среды и как обеспечить ему долгоживущую сессию поверх короткоживущих компонентов. Хороший переход от разговоров об агентах к их реальному устройству.
— «Влияние трендов развития нейросетей на архитектуру NPU и инференс-фреймворки» Егора Филимонова, лидера команды ускорения инференса на NPU в SGLang. Интересно посмотреть, как требования моделей меняют не только софт, но и железо под ним.
Ещё будут доклады про переход рекомендательных систем от классического ML к генеративным моделям, инфраструктуру RL-обучения и Physical AI — автономные системы, которые принимают решения уже не в чате, а в физическом мире. В параллельной программе заявлены кейсы про превращение Алисы из поиска в агента, AI как управляющий слой Яндекс Лавки, измерение реальной продуктивности разработчиков с AI и построение MLOps в условиях Zero Data Access.
Для подключения к трансляции нужно зарегистрироваться: участники смогут задать вопросы экспертам и после мероприятия получить записи всех докладов, включая те, что не попали в трансляцию.
Подробная программа и регистрация — здесь.
5 сентября Яндекс проведёт deep tech night — конференцию о технологических вызовах, с которыми индустрия сталкивается в эпоху AI. Не столько о самих нейросетях, сколько о том, как из-за них меняются архитектура, инфраструктура, продукты и работа разработчиков.
В программе много полезных докладов. Например, Мо Гавдат, бывший Chief Business Officer Google X, представит свой взгляд на то, как генеративные модели могут изменить разработку ПО, инженерные команды и саму роль разработчика.
Из технической части мне особенно интересны два доклада:
— «Облако в эпоху AI: архитектура платформы для гибридных агентов» Василия Ершова. Про то, как агент собирается из модели, инструментов и среды и как обеспечить ему долгоживущую сессию поверх короткоживущих компонентов. Хороший переход от разговоров об агентах к их реальному устройству.
— «Влияние трендов развития нейросетей на архитектуру NPU и инференс-фреймворки» Егора Филимонова, лидера команды ускорения инференса на NPU в SGLang. Интересно посмотреть, как требования моделей меняют не только софт, но и железо под ним.
Ещё будут доклады про переход рекомендательных систем от классического ML к генеративным моделям, инфраструктуру RL-обучения и Physical AI — автономные системы, которые принимают решения уже не в чате, а в физическом мире. В параллельной программе заявлены кейсы про превращение Алисы из поиска в агента, AI как управляющий слой Яндекс Лавки, измерение реальной продуктивности разработчиков с AI и построение MLOps в условиях Zero Data Access.
Для подключения к трансляции нужно зарегистрироваться: участники смогут задать вопросы экспертам и после мероприятия получить записи всех докладов, включая те, что не попали в трансляцию.
Подробная программа и регистрация — здесь.
🔥3🤡1
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
Да, к слову, кто не знает, что за Markdown такой, вот: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
Я ссылаюсь на вариант от GitHub, потому что он самый популярный. В комментариях есть ссылка на вариант от GitLab.
А вот, собственно, где это нововведение обсуждалось: https://github.com/orgs/community/discussions/16925
Как вам кастомный маркдаун, котаны? Заходит?
#github #md #note #бородач
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
Да, к слову, кто не знает, что за Markdown такой, вот: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
Я ссылаюсь на вариант от GitHub, потому что он самый популярный. В комментариях есть ссылка на вариант от GitLab.
А вот, собственно, где это нововведение обсуждалось: https://github.com/orgs/community/discussions/16925
Как вам кастомный маркдаун, котаны? Заходит?
#github #md #note #бородач
1🔥4❤2
#заметка дня
Каким бы современным ни был ваш фронтенд, у крупного клиента между браузером и интернетом вполне может стоять Zscaler — корпоративная система безопасности, через которую компании прогоняют веб-трафик сотрудников, фильтруют его и инспектируют HTTPS.
С TLS inspection он фактически работает как MITM-прокси: расшифровывает трафик, проверяет его и устанавливает новое соединение до вашего сервера. В результате ваши красивые предположения про HTTP/2, multiplexing и долгоживущие соединения внезапно превращаются в тупую очередь.
У Zscaler HTTP/2 зависит от настроек, а некоторые функции вообще откатывают трафик на HTTP/1.1. WebSocket тоже проходит через отдельные политики и ограничения.
И вот вы ищете баг во фронтенде, потому что «у банка всё тормозит», а проблема в том, что где-то между вашим кодом и пользователем сидит корпоративный прокси и молча превращает 2026 год обратно в 2012-й.
А потом тикет всё равно прилетит вам.
#bug #http
Каким бы современным ни был ваш фронтенд, у крупного клиента между браузером и интернетом вполне может стоять Zscaler — корпоративная система безопасности, через которую компании прогоняют веб-трафик сотрудников, фильтруют его и инспектируют HTTPS.
С TLS inspection он фактически работает как MITM-прокси: расшифровывает трафик, проверяет его и устанавливает новое соединение до вашего сервера. В результате ваши красивые предположения про HTTP/2, multiplexing и долгоживущие соединения внезапно превращаются в тупую очередь.
У Zscaler HTTP/2 зависит от настроек, а некоторые функции вообще откатывают трафик на HTTP/1.1. WebSocket тоже проходит через отдельные политики и ограничения.
И вот вы ищете баг во фронтенде, потому что «у банка всё тормозит», а проблема в том, что где-то между вашим кодом и пользователем сидит корпоративный прокси и молча превращает 2026 год обратно в 2012-й.
А потом тикет всё равно прилетит вам.
#bug #http
🫡5🤩3
#ссылка дня
Ну, кто тут пишетплохо неподдерживаемо? Признавайтесь.
Can’t Maintain показывает два варианта API и предлагает выбрать тот, за который будущие разработчики скажут спасибо.
Кроме игры внутри лежит вполне приличный справочник: 117 паттернов про именование, controlled/uncontrolled-компоненты, render props, discriminated unions, доступность и React 19. Не все ответы стоит принимать за закон, но как повод проверить собственные привычки — отлично.
А если зайдёт формат, у автора есть целая серия: такие же тренажёры по TypeScript, адаптивной вёрстке, Git, тестированию, API, SEO и UX. В сумме почти тысяча задач, всё бесплатно и с открытым исходным кодом.
#education
Ну, кто тут пишет
Can’t Maintain показывает два варианта API и предлагает выбрать тот, за который будущие разработчики скажут спасибо.
loading или isLoading, набор булевых пропсов или один variant, отдельные обработчики или нормальная композиция — всего 10 вопросов за игру, после каждого есть объяснение.Кроме игры внутри лежит вполне приличный справочник: 117 паттернов про именование, controlled/uncontrolled-компоненты, render props, discriminated unions, доступность и React 19. Не все ответы стоит принимать за закон, но как повод проверить собственные привычки — отлично.
А если зайдёт формат, у автора есть целая серия: такие же тренажёры по TypeScript, адаптивной вёрстке, Git, тестированию, API, SEO и UX. В сумме почти тысяча задач, всё бесплатно и с открытым исходным кодом.
#education
👍16
Что делать с петабайтами данных в MinIO, если разработка хранилища остановлена?
MinIO прекратил активную разработку — продукт зафиксирован в текущем состоянии, патчи безопасности рассматриваются в индивидуальном порядке, обновления не тестируются. Для компаний, у которых на MinIO (или другом open-source S3-хранилище) хранятся петабайты данных, это уже не гипотетический риск, а вопрос времени.
3 сентября показываем на практике, как перенести данные из устаревшего хранилища в другое S3-совместимое — без остановки сервиса.
В программе:
🔹 что переносится: объекты, версии, ACL, bucket-policy, lifecycle, теги, ссылки
🔹 техническое переключение с минимальным окном смены endpoint и параллельной работой на обоих хранилищах
🔹 поведение при сбоях синхронизации — перенос с точки останова, а не с нуля
🔹 демо: от подключения источника до полного переключения трафика
Для DevOps- и SRE-инженеров, ИТ-директоров и всех, кому остановка сервиса недопустима даже на время миграции.
📅 3 сентября, 16:00 мск
Регистрация
MinIO прекратил активную разработку — продукт зафиксирован в текущем состоянии, патчи безопасности рассматриваются в индивидуальном порядке, обновления не тестируются. Для компаний, у которых на MinIO (или другом open-source S3-хранилище) хранятся петабайты данных, это уже не гипотетический риск, а вопрос времени.
3 сентября показываем на практике, как перенести данные из устаревшего хранилища в другое S3-совместимое — без остановки сервиса.
В программе:
🔹 что переносится: объекты, версии, ACL, bucket-policy, lifecycle, теги, ссылки
🔹 техническое переключение с минимальным окном смены endpoint и параллельной работой на обоих хранилищах
🔹 поведение при сбоях синхронизации — перенос с точки останова, а не с нуля
🔹 демо: от подключения источника до полного переключения трафика
Для DevOps- и SRE-инженеров, ИТ-директоров и всех, кому остановка сервиса недопустима даже на время миграции.
📅 3 сентября, 16:00 мск
Регистрация
❤1
#статья дня
В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".
И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).
Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...
И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!
Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...
И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html
Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html
Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.
Всем st, котаны!
#opentype #font #features #бородач
В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".
И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).
Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...
И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!
Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...
И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html
Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html
Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.
Всем st, котаны!
#opentype #font #features #бородач
❤3🔥1
#заметка дня
В CSS Fonts Level 5 обсуждают
Пользователь увеличивает шрифт в настройках ОС, приложения подхватывают это предпочтение, а браузерам пофигу.
На Android Firefox учитывает системный масштаб текста, а Chrome — нет; на iOS Dynamic Type не применяется к обычным страницам в Safari. В результате сайт может выглядеть нормально при стандартных настройках, но оставаться практически недоступным для человека, который рассчитывает на увеличенный системный текст.
Отсюда и практическое последствие: чем больше типографика и размеры компонентов завязаны на относительные единицы, тем лучше интерфейс адаптируется к пользовательскому масштабу. А жёсткие размеры, ограниченная высота и другие предположения о том, сколько места займёт текст, начинают проявляться обрезанием контента и горизонтальным скроллом.
Manuel Matuzović протестировал proposal на своём сайте и подробно описал результат: https://www.matuzo.at/blog/2026/text-scaling-meta-tag
Proposal: https://drafts.csswg.org/css-fonts-5/#text-scale-meta
#css #font #scale
В CSS Fonts Level 5 обсуждают
<meta name="text-scale">. Его появление связано с тем, что системная настройка размера текста на мобильных устройствах сейчас не гарантирует увеличение текста в вебе.Пользователь увеличивает шрифт в настройках ОС, приложения подхватывают это предпочтение, а браузерам пофигу.
На Android Firefox учитывает системный масштаб текста, а Chrome — нет; на iOS Dynamic Type не применяется к обычным страницам в Safari. В результате сайт может выглядеть нормально при стандартных настройках, но оставаться практически недоступным для человека, который рассчитывает на увеличенный системный текст.
<meta name="text-scale" content="scale"> должен дать странице способ явно поддержать это предпочтение. Браузер включает пользовательский text scale factor в базовый размер шрифта, а дальше масштабирование естественно распространяется через CSS: rem следует за новым базовым размером, тогда как px остаётся фиксированным.Отсюда и практическое последствие: чем больше типографика и размеры компонентов завязаны на относительные единицы, тем лучше интерфейс адаптируется к пользовательскому масштабу. А жёсткие размеры, ограниченная высота и другие предположения о том, сколько места займёт текст, начинают проявляться обрезанием контента и горизонтальным скроллом.
Manuel Matuzović протестировал proposal на своём сайте и подробно описал результат: https://www.matuzo.at/blog/2026/text-scaling-meta-tag
Proposal: https://drafts.csswg.org/css-fonts-5/#text-scale-meta
#css #font #scale
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
#компонент дня
Bramus сделал
Вот: https://www.bram.us/2026/09/02/html-in-canvas-pageflip/
Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: https://xn--r1a.website/htmlshit/400
Но там не 3D, там clip-path и динамические тени.
А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.
Удобно? Не то слово!
Пока, правда, это работает в Chrome за флагом
В лучших традициях Macromedia Flash!
#canvas #html #webgl #webgpu
Bramus сделал
<hic-pageflip> — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM.Вот: https://www.bram.us/2026/09/02/html-in-canvas-pageflip/
Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: https://xn--r1a.website/htmlshit/400
Но там не 3D, там clip-path и динамические тени.
А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.
Удобно? Не то слово!
Пока, правда, это работает в Chrome за флагом
canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов.В лучших традициях Macromedia Flash!
#canvas #html #webgl #webgpu
🔥14👍2❤1
Media is too big
VIEW IN TELEGRAM
#статья дня
Один из самых популярных вопросов на технических собеседованиях: «Что происходит после того, как вы ввели URL в браузере и нажали Enter?»
Хорош он тем, что начать можно с «ну, DNS → HTTP → страница», а закончить где-нибудь глубоко в TCP, TLS, системных вызовах, планировщике ОС и внутренностях рантайма. По глубине ответа довольно быстро становится понятно, насколько человек вообще представляет себе весь стек целиком.
200ms — очень хорошая интерактивная версия ответа на этот вопрос.
Авторы берут один HTTP-запрос и проводят его через примерно 200 миллисекунд жизни: DNS, TCP, TLS, ядро ОС, Node.js, event loop, Postgres — и затем обратно к клиенту.
Причём это не просто очередной огромный лонгрид со схемами. Статья сделана как интерактивное путешествие: запрос буквально двигается по системе, а ты шаг за шагом смотришь, куда он попал, что там происходит и почему.
Есть, правда, и небольшой перегиб: местами авторы ныряют в детали уже буквально до уровня железа вашего телефона — что именно делает процессор, память и всё вокруг. Для понимания веб-разработки это далеко не всегда необходимо, но материал от этого скорее выигрывает: появляется ощущение, что ты реально проваливаешься через весь стек слой за слоем.
В общем, отличный способ освежить в голове тот самый собеседовательный вопрос, только не в виде заученного ответа на пять минут, а нормально, со вкусом.
https://200ms.thenodebook.com/
#web #interview #request
Один из самых популярных вопросов на технических собеседованиях: «Что происходит после того, как вы ввели URL в браузере и нажали Enter?»
Хорош он тем, что начать можно с «ну, DNS → HTTP → страница», а закончить где-нибудь глубоко в TCP, TLS, системных вызовах, планировщике ОС и внутренностях рантайма. По глубине ответа довольно быстро становится понятно, насколько человек вообще представляет себе весь стек целиком.
200ms — очень хорошая интерактивная версия ответа на этот вопрос.
Авторы берут один HTTP-запрос и проводят его через примерно 200 миллисекунд жизни: DNS, TCP, TLS, ядро ОС, Node.js, event loop, Postgres — и затем обратно к клиенту.
Причём это не просто очередной огромный лонгрид со схемами. Статья сделана как интерактивное путешествие: запрос буквально двигается по системе, а ты шаг за шагом смотришь, куда он попал, что там происходит и почему.
Есть, правда, и небольшой перегиб: местами авторы ныряют в детали уже буквально до уровня железа вашего телефона — что именно делает процессор, память и всё вокруг. Для понимания веб-разработки это далеко не всегда необходимо, но материал от этого скорее выигрывает: появляется ощущение, что ты реально проваливаешься через весь стек слой за слоем.
В общем, отличный способ освежить в голове тот самый собеседовательный вопрос, только не в виде заученного ответа на пять минут, а нормально, со вкусом.
https://200ms.thenodebook.com/
#web #interview #request
❤15🔥2
Если ты читаешь это, скорее всего, у тебя уже была проблема: надо оплатить подписку или купить иностранный софт, а российскую карту не принимают.
Mirocard решает это за пару минут:
Это сервис, где можно выпустить виртуальную карту, пополнить рублями через СБП
- Midjourney
- ChatGPT
- Figma
- ElevenLabs
- Claude
- Netflix
- Spotify и еще сотни подписок
По промокоду HTML50 выпуск карты со скидкой 50% Открывайте карту в пару кликов и с ней более удобный способ оплаты любимых сервисов!
Please open Telegram to view this post
VIEW IN TELEGRAM
👎3👍1
#инструмент дня
Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.
Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!
И называется он git-sim, вот так вот буквально.
Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.
Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim
И на GitHub проекта: https://github.com/initialcommit-com/git-sim
Очень уютная штука.
#git #sim #tool #бородач
Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.
Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!
И называется он git-sim, вот так вот буквально.
Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.
Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim
И на GitHub проекта: https://github.com/initialcommit-com/git-sim
Очень уютная штука.
#git #sim #tool #бородач
👍4🤩4
#заметка дня
Nvidia покупает Hugging Face за $12.93 млрд, и кто-то явно решил, что просто круглой суммы для сделки такого масштаба недостаточно.
Берём число 129303 и проверяем в консоли:
Получаем:
Потому что 129303 — это U+1F917, Unicode-код эмодзи 🤗, который называется Hugging Face.
Но на этом пасхалки не заканчиваются. Если те же цифры прочитать как HEX цвет:
получим очень характерный зелёный, довольно близкий к Nvidia.
То есть число одновременно можно прочитать как Hugging Face и как зелёный Nvidia.
Где-то между due diligence, юристами и оценке на миллиарды долларов нашлось место шуточкам за 300.
#nvidia #ai #huggingface
Nvidia покупает Hugging Face за $12.93 млрд, и кто-то явно решил, что просто круглой суммы для сделки такого масштаба недостаточно.
Берём число 129303 и проверяем в консоли:
String.fromCodePoint(129303)
Получаем:
🤗
Потому что 129303 — это U+1F917, Unicode-код эмодзи 🤗, который называется Hugging Face.
Но на этом пасхалки не заканчиваются. Если те же цифры прочитать как HEX цвет:
document.body.style.background = '#129303'
получим очень характерный зелёный, довольно близкий к Nvidia.
То есть число одновременно можно прочитать как Hugging Face и как зелёный Nvidia.
Где-то между due diligence, юристами и оценке на миллиарды долларов нашлось место шуточкам за 300.
#nvidia #ai #huggingface
❤18🤩10🔥6
#инструмент дня
TanStack выпустили Hotkeys — библиотеку обработки клавиатурных сокращений.
Да, давно уже есть
Но у TanStack Hotkeys всё это сразу считается одной командной системой.
Скоупы, последовательности, удержание клавиш, keyup, rebinding, конфликты,
Ах, да. Framework-agnostic, конечно же.
С Query, Table и Virtual у них уже получалось примерно то же самое. Они редко приносят новую идею как таковую, зато дорабатывают прекрасно.
Hotkeys пока alpha, но почитать документацию стоит хотя бы ради того, чтобы посмотреть, сколько нюансов там вообще.
#tanstack #hotkeys #library
TanStack выпустили Hotkeys — библиотеку обработки клавиатурных сокращений.
Да, давно уже есть
react-hotkeys-hook, hotkeys-js, Mousetrap, у части из них тоже есть scopes, refs, sequences и запись макросов.Но у TanStack Hotkeys всё это сразу считается одной командной системой.
Скоупы, последовательности, удержание клавиш, keyup, rebinding, конфликты,
Mod для Ctrl/Cmd, platform-aware отображение сочетаний, работа с editable-элементами и даже devtools. По отдельности почти всё это уже где-то было. Вопрос в том, сколько библиотек и собственного кода вам нужно было собрать вокруг простого keydown, чтобы получить всё сразу.Ах, да. Framework-agnostic, конечно же.
С Query, Table и Virtual у них уже получалось примерно то же самое. Они редко приносят новую идею как таковую, зато дорабатывают прекрасно.
Hotkeys пока alpha, но почитать документацию стоит хотя бы ради того, чтобы посмотреть, сколько нюансов там вообще.
#tanstack #hotkeys #library
1🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты
Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из
Так-то забавно выходит.
Ах, да.
Ссылка:
https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f
#css #grid
CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты
anchor() меняются, а transition плавно двигает карточку к новому месту.Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из
anchor() пока не анимирует — карточки просто прыгают. Но зато в Safari 26 всё отлично! Я удивлён.Так-то забавно выходит.
Ах, да.
Ссылка:
https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f
#css #grid
🔥16❤6👍2
#заметка дня
Сразу нелишним будет напомнить, что я уже 6 лет живу и работаю в Финляндии, и даже в финской компании.
Есть одна вещь, которая мне очень нравится в том, как финны в IT обращаются с английским: они совершенно не считают нужным оставлять английские слова английскими.
Финский вообще довольно буквальный язык:
Jira — «йира».
Cache — примерно «кацхе».
Done — «до́нэ».
System — «сюстэм»
Apple — буквально «аппле».
Google — guugle.
YouTube — juutuubi.
А дальше слово ещё и становится грамматически финским:
sprint → sprintti
ticket → ticketti
server → serveri
bug → bugi
commit → committi
deploy → deployata
Есть даже отдельный термин — rallienglanti, «раллийный английский»: английский финских гонщиков, где слова английские, а фонетика, ритм и интонация остаются совершенно финскими.
Для человека из русскоязычной IT-среды это сначала непривычно. У нас долго было ощущение, что английское слово надо хотя бы на секунду произнести правильно.
А «яваскрипт», «микрософт», «аппле», «питон» или «докер» легко могли звучать либо как плохой английский, либо как намеренный айтишный китч.
Получалось смешно: всё предложение по-русски, но перед словом framework человек на секунду становился американским радиоведущим.
А потом садился в свой Mini с Union Jack на крыше.
В Финляндии этого переключения как будто нет. Человек может прекрасно говорить по-английски, но в финской фразе Jira всё равно будет «йира», Apple — «аппле», а что-нибудь вполне можно deployata.
Слово попало в язык — всё, поздно. Теперь оно немного финское. Или русское, смотря кто произнёс.
Иллюстрация: Jutta Mykrä.
#finland #it
Сразу нелишним будет напомнить, что я уже 6 лет живу и работаю в Финляндии, и даже в финской компании.
Есть одна вещь, которая мне очень нравится в том, как финны в IT обращаются с английским: они совершенно не считают нужным оставлять английские слова английскими.
Финский вообще довольно буквальный язык:
a читается как «а», e как «э», i как «и», j как «й», ударение почти всегда на первый слог. И английское слово, попав в финскую речь, часто просто прогоняется через эти правила.Jira — «йира».
Cache — примерно «кацхе».
Done — «до́нэ».
System — «сюстэм»
Apple — буквально «аппле».
Google — guugle.
YouTube — juutuubi.
А дальше слово ещё и становится грамматически финским:
sprint → sprintti
ticket → ticketti
server → serveri
bug → bugi
commit → committi
deploy → deployata
Есть даже отдельный термин — rallienglanti, «раллийный английский»: английский финских гонщиков, где слова английские, а фонетика, ритм и интонация остаются совершенно финскими.
Для человека из русскоязычной IT-среды это сначала непривычно. У нас долго было ощущение, что английское слово надо хотя бы на секунду произнести правильно.
А «яваскрипт», «микрософт», «аппле», «питон» или «докер» легко могли звучать либо как плохой английский, либо как намеренный айтишный китч.
Получалось смешно: всё предложение по-русски, но перед словом framework человек на секунду становился американским радиоведущим.
А потом садился в свой Mini с Union Jack на крыше.
В Финляндии этого переключения как будто нет. Человек может прекрасно говорить по-английски, но в финской фразе Jira всё равно будет «йира», Apple — «аппле», а что-нибудь вполне можно deployata.
Слово попало в язык — всё, поздно. Теперь оно немного финское. Или русское, смотря кто произнёс.
Иллюстрация: Jutta Mykrä.
#finland #it
👍9❤7🔥2
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет, меня зовут Виталий. Я иженер по автоматизации тестирования и по совместительству нагрузочный инженер. Проект такого масштаба никогда не планировал делать, но обо всем по порядку...
Все началось с того, что когда я пришел на проект - надо было поднимать нагрузку с абсолютного нуля. Поскольку у нас использовался JS стек(playwright) то было принято решение взять k6. Конечно, это позволило нам быстро стартануть, но чем дальше в лес, тем сложнее было поддерживать решение.
Начнем с того, что у k6 есть ограничение на VUS(virtual users) ~50k. И это стартовая точка костылей. Затем нам понадобился sidecar — helper сервер, чтобы производить определенные манипуляции, затем еще один за другим велосипедом. И в какой-то момент я решил, что управлять сложностью стало проблематично и решил, что хочу решить эти проблемы, но плавно.
Так появилась первая версия perfscale. Простой генератор нагрузки, который умеет еще и запускать k6, чтобы переход был максимально гладким.
Затем я начал думать над тем, что меняется от проекта к проекта и вывел закономерность - надо делить конфигурацию (configuration/config) от самого теста. Затем надо было добавить простой UI для отображения тестов и конфигураций, затем сделать интеграцию с OIDC и поместить внутрь контура. И вот так, постепенно, шаг за шагом, я пришел уже к полноценному продукту - https://perfscale.ru/ , который закрывает все типы тестов. А для большего комфорта я движок опенсорснул -🧑💻 https://github.com/Perfscale/perfscale. Считаю, что это правильный шаг.
Единственное, что нет в OSS - fix protocol (прим.📊 fix protocol - финансовый протокол для передачи финансовых данных), ну и самих фич: OIDC, multi tenant, AI inference ,integrations (git, prometheus, allure testops, slack, webhooks, etc.) вобщем все то, что накладывается поверх самого движка.
Из последних вещей, которые я сделал в perfscale OSS (на момент написания) - это gRPC, child_process(sidecar) а впереди еще и поддержка других клиентов: databases, webrtc, graphql, и даже собственный marketplace для того,чтобы не городить ворох велосипедов. А еще я веду sponsr / habr - где пишу о еженедельных новостях, связанных с perfscale.
Ну а если я лично вам приглянулся , то еще и веду свой TG канал -✈️ Haradkou SDET, где пишу обо всяком, связанным с автоматизацией тестирования
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет, меня зовут Виталий. Я иженер по автоматизации тестирования и по совместительству нагрузочный инженер. Проект такого масштаба никогда не планировал делать, но обо всем по порядку...
Все началось с того, что когда я пришел на проект - надо было поднимать нагрузку с абсолютного нуля. Поскольку у нас использовался JS стек(playwright) то было принято решение взять k6. Конечно, это позволило нам быстро стартануть, но чем дальше в лес, тем сложнее было поддерживать решение.
Начнем с того, что у k6 есть ограничение на VUS(virtual users) ~50k. И это стартовая точка костылей. Затем нам понадобился sidecar — helper сервер, чтобы производить определенные манипуляции, затем еще один за другим велосипедом. И в какой-то момент я решил, что управлять сложностью стало проблематично и решил, что хочу решить эти проблемы, но плавно.
Так появилась первая версия perfscale. Простой генератор нагрузки, который умеет еще и запускать k6, чтобы переход был максимально гладким.
Затем я начал думать над тем, что меняется от проекта к проекта и вывел закономерность - надо делить конфигурацию (configuration/config) от самого теста. Затем надо было добавить простой UI для отображения тестов и конфигураций, затем сделать интеграцию с OIDC и поместить внутрь контура. И вот так, постепенно, шаг за шагом, я пришел уже к полноценному продукту - https://perfscale.ru/ , который закрывает все типы тестов. А для большего комфорта я движок опенсорснул -
Единственное, что нет в OSS - fix protocol (прим.
Из последних вещей, которые я сделал в perfscale OSS (на момент написания) - это gRPC, child_process(sidecar) а впереди еще и поддержка других клиентов: databases, webrtc, graphql, и даже собственный marketplace для того,чтобы не городить ворох велосипедов. А еще я веду sponsr / habr - где пишу о еженедельных новостях, связанных с perfscale.
Ну а если я лично вам приглянулся , то еще и веду свой TG канал -
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤4
This media is not supported in your browser
VIEW IN TELEGRAM
#книга дня
Data Structures and Algorithms от Kirupa
Сегодня не совсем книга, а большой набор связанных статей по структурам данных и алгоритмам.
https://www.kirupa.com/data_structures_algorithms/introduction_book_tutorials.htm
Темы обычные: Big O, массивы, стеки, деревья, графы, DFS/BFS, Дейкстра, сортировки. Но часть материала сделана специально под веб, а не просто перенесена туда из учебника.
Например, офигенская глава про движение по двумерной сетке:
https://www.kirupa.com/data_structures_algorithms/moving_around_a_grid.htm
Там есть чувачок-инопланетянин, которого можно гонять стрелками или WASD по сетке 10×10. На нём разбираются смещения координат, проверки границ и обновление позиции.
Ах, да. Естественно, все изученные структуры данных даются не просто так, а чтобы написать простые игры, представленные в конце цикла.
#algorithms #data_structures
Data Structures and Algorithms от Kirupa
Сегодня не совсем книга, а большой набор связанных статей по структурам данных и алгоритмам.
https://www.kirupa.com/data_structures_algorithms/introduction_book_tutorials.htm
Темы обычные: Big O, массивы, стеки, деревья, графы, DFS/BFS, Дейкстра, сортировки. Но часть материала сделана специально под веб, а не просто перенесена туда из учебника.
Например, офигенская глава про движение по двумерной сетке:
https://www.kirupa.com/data_structures_algorithms/moving_around_a_grid.htm
Там есть чувачок-инопланетянин, которого можно гонять стрелками или WASD по сетке 10×10. На нём разбираются смещения координат, проверки границ и обновление позиции.
Ах, да. Естественно, все изученные структуры данных даются не просто так, а чтобы написать простые игры, представленные в конце цикла.
#algorithms #data_structures
❤8👍1
#ссылка дня
Если вдруг этим дождливым (ничо не знаю, у меня дождь) вечером нечем заняться, предлагаю вам попробовать покрасить кнопку!
И не просто покрасить кнопку, а покрасить кнопку с помощью Клода. И ничего более.
https://opusfived.dev/
Думаете, получится? :)
#claude #opus
Если вдруг этим дождливым (ничо не знаю, у меня дождь) вечером нечем заняться, предлагаю вам попробовать покрасить кнопку!
И не просто покрасить кнопку, а покрасить кнопку с помощью Клода. И ничего более.
https://opusfived.dev/
Думаете, получится? :)
#claude #opus
🤩4🔥2👎1
#такое дня
Ничего такого, просто макбук с линуксом (конкретно, Omarchy) смотрит на себя в зеркало через вебкамеру, чтобы дать агенту нужную информацию для оптимизации драйвера AMD Radeon GPU.
https://x.com/jpschroeder/status/2097758256420565442
#ai
Ничего такого, просто макбук с линуксом (конкретно, Omarchy) смотрит на себя в зеркало через вебкамеру, чтобы дать агенту нужную информацию для оптимизации драйвера AMD Radeon GPU.
https://x.com/jpschroeder/status/2097758256420565442
#ai
🤩26🔥5👍2👏1