Участвуй во всероссийском ИТ-чемпионате МТС True Tech Champ 2026 c призовой фондом 10 250 000 рублей.
Если тебе нравятся алгоритмы, структуры данных и задачи на чистую логику — участвуй в алгоритмическом треке с индивидуальным зачетом.
Решай задачи разного уровня сложности: от базовых до тех, что проверяют скорость мышления и умение оптимизировать решения за ограниченное время.
В финале лучшие 120 участников алгоритмического трека сразятся в лайв-кодинге за шесть призовых мест и 2 750 000 рублей. Всех финалистов ждут:
— Лимитированный мерч;
— Сертификаты об участии;
— Масштабное мероприятие с выступлениями хэдлайнеров и фестивальными активностями.
Успей зарегистрироваться и пройти отборочный этап до 27 сентября.
Erid: 2VSb5xn8e7k
Если тебе нравятся алгоритмы, структуры данных и задачи на чистую логику — участвуй в алгоритмическом треке с индивидуальным зачетом.
Решай задачи разного уровня сложности: от базовых до тех, что проверяют скорость мышления и умение оптимизировать решения за ограниченное время.
В финале лучшие 120 участников алгоритмического трека сразятся в лайв-кодинге за шесть призовых мест и 2 750 000 рублей. Всех финалистов ждут:
— Лимитированный мерч;
— Сертификаты об участии;
— Масштабное мероприятие с выступлениями хэдлайнеров и фестивальными активностями.
Успей зарегистрироваться и пройти отборочный этап до 27 сентября.
Erid: 2VSb5xn8e7k
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Привет, я Ксюша. Много лет фронтендер, в прошлом дизайнер. Люблю упрощать себе жизнь, создавая удобные и уютные приложения под свои потребности.
Увидела, что автор канала выкладывает приложения подписчиков, и решила поделиться своим последним творением. Оно уже работает, им можно пользоваться.
Сначала приложение задумывалось для ребёнка: домашние дела как маленькая зарплата. Больше не нужно по сто раз напоминать про посуду, а спорить «я же всё сделал!» бессмысленно, всё видно в истории. Потом я его расширила, и теперь им могут пользоваться заказчик с фрилансером, друзья, муж с женой - назначать друг другу дела ) Какой бы вариант вы ни выбрали при входе, приложение остаётся таким же простым и милым.
Для семьи настройка занимает три шага: добавить ребёнка, завести список ежедневных дел, назначить цену дня. У нас это 100 тасккоинов в день (сын меняет их на робуксы для Роблокса или на рубли). Но валюта может быть любой, как договоритесь: хоть доллары, хоть поцелуи )
Дальше ребёнок открывает свою версию приложения и вычёркивает: помыть посуду, Duolingo, прочитать 40 страниц. Всё сделано - плюс сто. Что-то забыто - минус пятьдесят.
В любой день месяца можно нажать кнопку «Чек». Чек настоящий, лентой: дни, суммы, штрафы отдельной строкой, итого к выплате и штрихкод для реалистичности. Чек можно предъявить родителям, заказчику или жене.
В графе «Работник» стоит не имя, а Пингвин. Или Котик. Или Лисёнок. Имён приложение не спрашивает вообще, вместо имени выбирается мордашка. Это не только ради красоты: так не возникает вопросов к хранению персональных данных. Приложение не хранит ни имён, ни почты, ни телефона, войти можно анонимно.
Бесплатно, без рекламы, работает на телефоне и на компьютере. Я сама пользуюсь несколько месяцев - полёт отличный. Может и вам пригодится.
TaskCoin — https://taskcoin.app/ru
Стек: React 19, Express 5, Prisma + PostgreSQL (Neon), хостинг на Vercel, ставится на телефон как PWA. Cron нет: зарплата и штрафы считаются в момент запроса, а день закрывается по часовому поясу ребёнка.
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Привет, я Ксюша. Много лет фронтендер, в прошлом дизайнер. Люблю упрощать себе жизнь, создавая удобные и уютные приложения под свои потребности.
Увидела, что автор канала выкладывает приложения подписчиков, и решила поделиться своим последним творением. Оно уже работает, им можно пользоваться.
Сначала приложение задумывалось для ребёнка: домашние дела как маленькая зарплата. Больше не нужно по сто раз напоминать про посуду, а спорить «я же всё сделал!» бессмысленно, всё видно в истории. Потом я его расширила, и теперь им могут пользоваться заказчик с фрилансером, друзья, муж с женой - назначать друг другу дела ) Какой бы вариант вы ни выбрали при входе, приложение остаётся таким же простым и милым.
Для семьи настройка занимает три шага: добавить ребёнка, завести список ежедневных дел, назначить цену дня. У нас это 100 тасккоинов в день (сын меняет их на робуксы для Роблокса или на рубли). Но валюта может быть любой, как договоритесь: хоть доллары, хоть поцелуи )
Дальше ребёнок открывает свою версию приложения и вычёркивает: помыть посуду, Duolingo, прочитать 40 страниц. Всё сделано - плюс сто. Что-то забыто - минус пятьдесят.
В любой день месяца можно нажать кнопку «Чек». Чек настоящий, лентой: дни, суммы, штрафы отдельной строкой, итого к выплате и штрихкод для реалистичности. Чек можно предъявить родителям, заказчику или жене.
В графе «Работник» стоит не имя, а Пингвин. Или Котик. Или Лисёнок. Имён приложение не спрашивает вообще, вместо имени выбирается мордашка. Это не только ради красоты: так не возникает вопросов к хранению персональных данных. Приложение не хранит ни имён, ни почты, ни телефона, войти можно анонимно.
Бесплатно, без рекламы, работает на телефоне и на компьютере. Я сама пользуюсь несколько месяцев - полёт отличный. Может и вам пригодится.
TaskCoin — https://taskcoin.app/ru
Стек: React 19, Express 5, Prisma + PostgreSQL (Neon), хостинг на Vercel, ставится на телефон как PWA. Cron нет: зарплата и штрафы считаются в момент запроса, а день закрывается по часовому поясу ребёнка.
❤27🔥14👎2👏1
#инструмент дня
GitHub вытащил stacked pull requests в открытое тестирование.
Сам подход стеков многим уже знаком: большую фичу режут на цепочку зависимых PR вместо одного огромного diff.
Например:
Так делали руками много лет. Один PR строится поверх другого, ревьюить их проще, а работу над следующим куском можно продолжать до merge предыдущего.
Проблема всегда была в обслуживании этой цепочки. Поправил что-то внизу — перебазируй всё сверху, делай force push, проверяй ветки и следи, чтобы GitHub не начал показывать лишние изменения.
Stacks автоматизирует именно это: GitHub понимает всю цепочку, показывает её целиком и умеет каскадно обновлять верхние PR после изменений и merge нижних. Есть и
Меньше диффы, проще ревью, меньше ожидания между зависимыми кусками. С агентами это особенно полезно — сгенерировать огромный PR теперь легко, а читать его всё равно человеку.
Правда, пока не без проблем. При включённом
В общем, делаем всё то же самое, только теперь со сравнительно нормальным UI.
#github #stack
GitHub вытащил stacked pull requests в открытое тестирование.
Сам подход стеков многим уже знаком: большую фичу режут на цепочку зависимых PR вместо одного огромного diff.
Например:
main ← schema ← API ← UI ← testsТак делали руками много лет. Один PR строится поверх другого, ревьюить их проще, а работу над следующим куском можно продолжать до merge предыдущего.
Проблема всегда была в обслуживании этой цепочки. Поправил что-то внизу — перебазируй всё сверху, делай force push, проверяй ветки и следи, чтобы GitHub не начал показывать лишние изменения.
Stacks автоматизирует именно это: GitHub понимает всю цепочку, показывает её целиком и умеет каскадно обновлять верхние PR после изменений и merge нижних. Есть и
gh stack, при этом под капотом остаются обычные ветки и pull requests.Меньше диффы, проще ревью, меньше ожидания между зависимыми кусками. С агентами это особенно полезно — сгенерировать огромный PR теперь легко, а читать его всё равно человеку.
Правда, пока не без проблем. При включённом
dismiss stale approvals rebase может сбросить аппрувы, при этом UI способен ещё какое-то время показывать статус так, будто всё одобрено. Merge queue тоже добавляет сюрпризов: в некоторых сценариях после её работы stack может оказаться разбитым.В общем, делаем всё то же самое, только теперь со сравнительно нормальным UI.
#github #stack
1❤8🔥4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Браузер умеет рисовать текст уже лет тридцать. Но стоит вам открыть WebGL/WebGPU — и внезапно переносы строк, bidi, fallback шрифтов и лигатуры снова становятся вашей проблемой.
У Poimandres вышел Glyph v0.1.0 — движок типографики для веб-графики, который всё это забирает на себя: https://github.com/pmndrs/glyph
Poimandres (pmndrs) — это open-source коллектив вокруг React и веб-графики. Из их проектов вы, скорее всего, знаете React Three Fiber, Drei, Zustand, Jotai, Valtio, React Spring и use-gesture. То есть Glyph появился не из ниоткуда: это та же экосистема, которая уже много лет методично обрастает инструментами вокруг React, Three.js и интерактивной графики.
GPU-first рендеринг, batching, incremental updates, bitmap/MTSDF/Slug, Unicode shaping, CJK, font fallback, переносы, justification.
Есть и нормальный layout: абзацы, колонки, ограничения по форме, обтекание контуров и 3D-объектов.
Работает с Three.js, R3F и TypeGPU, можно подключить свой рендерер.
Пока pre-release: CJK частичный, TypeGPU experimental, emoji и vertical writing ещё в roadmap.
В общем, теперь для текста в WebGPU можно хотя бы не собирать HarfBuzz, layout и рендеринг по кускам самому.
Ну и ещё раз ссылка: https://github.com/pmndrs/glyph
#webgpu #typography #font #render
Браузер умеет рисовать текст уже лет тридцать. Но стоит вам открыть WebGL/WebGPU — и внезапно переносы строк, bidi, fallback шрифтов и лигатуры снова становятся вашей проблемой.
У Poimandres вышел Glyph v0.1.0 — движок типографики для веб-графики, который всё это забирает на себя: https://github.com/pmndrs/glyph
Poimandres (pmndrs) — это open-source коллектив вокруг React и веб-графики. Из их проектов вы, скорее всего, знаете React Three Fiber, Drei, Zustand, Jotai, Valtio, React Spring и use-gesture. То есть Glyph появился не из ниоткуда: это та же экосистема, которая уже много лет методично обрастает инструментами вокруг React, Three.js и интерактивной графики.
GPU-first рендеринг, batching, incremental updates, bitmap/MTSDF/Slug, Unicode shaping, CJK, font fallback, переносы, justification.
Есть и нормальный layout: абзацы, колонки, ограничения по форме, обтекание контуров и 3D-объектов.
Работает с Three.js, R3F и TypeGPU, можно подключить свой рендерер.
Пока pre-release: CJK частичный, TypeGPU experimental, emoji и vertical writing ещё в roadmap.
В общем, теперь для текста в WebGPU можно хотя бы не собирать HarfBuzz, layout и рендеринг по кускам самому.
Ну и ещё раз ссылка: https://github.com/pmndrs/glyph
#webgpu #typography #font #render
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Jev от TypeSafe — модель для задач, где не нужно генерировать ответ, а нужно выбрать один вариант из известного набора. Например, получить состояние интерфейса и решить, что делать дальше:
Browser Use взяли Jev и сделали Jev Ultrafast — браузерного агента, в котором обычная LLM почти не участвует в навигации по странице. Jev решает, что нажать, куда ввести текст или когда проскроллить, а небольшую языковую модель вызывают только тогда, когда сам текст действительно надо сгенерировать. Как именно устроен цикл, проще посмотреть на картинке.
За счёт этого агент работает очень быстро и при этом не требует скриншотов на каждом шаге. Никаких специальных сценариев под конкретные сайты тоже нет: он читает текущее состояние страницы и выбирает действие из того, что действительно доступно прямо сейчас.
Пока это всё ещё ранняя реализация с довольно заметными ограничениями, но сама схема выглядит вполне практично: не гонять генеративную модель там, где задача сводится к выбору следующего действия.
https://github.com/browser-use/jev-ultrafast/
Про сам Jev:
https://typesafe.ai/blog/introducing-system-one-models-and-jev
Думаю, про Jev-подход мы услышим ещё много. Это быстро, дёшево и удобно.
#jev #ai
Jev от TypeSafe — модель для задач, где не нужно генерировать ответ, а нужно выбрать один вариант из известного набора. Например, получить состояние интерфейса и решить, что делать дальше:
CLICK, TYPE_TEXT, SCROLL, WAIT. Вместо текста она возвращает вероятности для возможных действий. TypeSafe называет такие модели System One Models.Browser Use взяли Jev и сделали Jev Ultrafast — браузерного агента, в котором обычная LLM почти не участвует в навигации по странице. Jev решает, что нажать, куда ввести текст или когда проскроллить, а небольшую языковую модель вызывают только тогда, когда сам текст действительно надо сгенерировать. Как именно устроен цикл, проще посмотреть на картинке.
За счёт этого агент работает очень быстро и при этом не требует скриншотов на каждом шаге. Никаких специальных сценариев под конкретные сайты тоже нет: он читает текущее состояние страницы и выбирает действие из того, что действительно доступно прямо сейчас.
Пока это всё ещё ранняя реализация с довольно заметными ограничениями, но сама схема выглядит вполне практично: не гонять генеративную модель там, где задача сводится к выбору следующего действия.
https://github.com/browser-use/jev-ultrafast/
Про сам Jev:
https://typesafe.ai/blog/introducing-system-one-models-and-jev
Думаю, про Jev-подход мы услышим ещё много. Это быстро, дёшево и удобно.
#jev #ai
❤12👍4🫡1
Одно из модных слов этого года в ИИ — харнесс. Если совсем грубо, это вся обвязка вокруг самой модели: память, контекст, поиск, файлы, инструменты и логика того, как модель всем этим пользуется.
И харнесс, кажется, становится всё важнее. Современная модель сама по себе — уже не весь продукт. Очень многое зависит от того, в какую систему её встроили и что ей дали делать.
Свежий пример — GPT-6 Astra от OpenAI. На ARC-AGI-3 её прогнали в двух вариантах. В универсальном харнессе авторов теста, одинаковом для моделей разных компаний, при максимальном уровне рассуждений модель набрала 62,7%. С собственной обвязкой OpenAI — уже 98,6% при том же уровне рассуждений.
Разница в том числе в работе с контекстом: универсальная обвязка позволяет модели переносить между ходами только заметки, которые она сама решила сохранить. А обвязка OpenAI умеет сохранять внутреннее состояние рассуждений между запросами и сжимать длинный контекст.
То есть одну и ту же современную модель уже не всегда имеет смысл оценивать в отрыве от её «родной» обвязки. Если хочется выжать из неё максимум, харнесс может оказаться не менее важен, чем сама модель.
Похожую логику теперь можно увидеть и в Алисе AI. Она сама выбирает, какую модель использовать под конкретный запрос. Простому вопросу можно дать быстрый и дешёвый ответ. Если нужно проанализировать несколько документов, что-то посчитать или учесть много условий — Алиса может сама подключить режим «Эксперт».
В интервью Forbes Валерий Стромов рассказывает, что система строится вокруг 3–5 моделей-экспертов, автоматического распределения запросов и собственного харнесса.
Сейчас около 80% запросов обрабатывает собственная модель Alice AI. В «Эксперте» при этом могут использоваться как модели семейства Alice AI, так и общедоступные модели с открытыми весами, запущенные на серверах Яндекса.
И вот тут, кажется, хорошо виден общий сдвиг. Пользователю вообще не обязательно знать, какая именно нейросеть сейчас отвечает ему под капотом. Он хочет, чтобы задача просто была решена хорошо, быстро и без лишних затрат.
Поэтому вопрос «какая модель самая умная?» постепенно становится менее интересным, чем вопрос «насколько хорошо вокруг неё собран продукт».
И харнесс, кажется, становится всё важнее. Современная модель сама по себе — уже не весь продукт. Очень многое зависит от того, в какую систему её встроили и что ей дали делать.
Свежий пример — GPT-6 Astra от OpenAI. На ARC-AGI-3 её прогнали в двух вариантах. В универсальном харнессе авторов теста, одинаковом для моделей разных компаний, при максимальном уровне рассуждений модель набрала 62,7%. С собственной обвязкой OpenAI — уже 98,6% при том же уровне рассуждений.
Разница в том числе в работе с контекстом: универсальная обвязка позволяет модели переносить между ходами только заметки, которые она сама решила сохранить. А обвязка OpenAI умеет сохранять внутреннее состояние рассуждений между запросами и сжимать длинный контекст.
То есть одну и ту же современную модель уже не всегда имеет смысл оценивать в отрыве от её «родной» обвязки. Если хочется выжать из неё максимум, харнесс может оказаться не менее важен, чем сама модель.
Похожую логику теперь можно увидеть и в Алисе AI. Она сама выбирает, какую модель использовать под конкретный запрос. Простому вопросу можно дать быстрый и дешёвый ответ. Если нужно проанализировать несколько документов, что-то посчитать или учесть много условий — Алиса может сама подключить режим «Эксперт».
В интервью Forbes Валерий Стромов рассказывает, что система строится вокруг 3–5 моделей-экспертов, автоматического распределения запросов и собственного харнесса.
Сейчас около 80% запросов обрабатывает собственная модель Alice AI. В «Эксперте» при этом могут использоваться как модели семейства Alice AI, так и общедоступные модели с открытыми весами, запущенные на серверах Яндекса.
И вот тут, кажется, хорошо виден общий сдвиг. Пользователю вообще не обязательно знать, какая именно нейросеть сейчас отвечает ему под капотом. Он хочет, чтобы задача просто была решена хорошо, быстро и без лишних затрат.
Поэтому вопрос «какая модель самая умная?» постепенно становится менее интересным, чем вопрос «насколько хорошо вокруг неё собран продукт».
👍6❤3👏3🤩2
#статья дня
Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно.
Суть — сплошь и рядом ломаете прокрутку на body.
У страницы в браузере есть специальный root scroller — тот самый скролл всего документа.
И браузер умеет для него заметно больше, чем для обычного
На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh.
Проблема в том, что отказаться от всего этого очень легко. Классический app shell:
и потом
Проверяется смешно просто: прокрутить страницу и посмотреть
Ссылка ещё раз: The root scroller and how not to lose it
#css #scroll #root #appshell
Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно.
Суть — сплошь и рядом ломаете прокрутку на body.
У страницы в браузере есть специальный root scroller — тот самый скролл всего документа.
И браузер умеет для него заметно больше, чем для обычного
div с overflow: auto: восстанавливает позицию после перехода назад, прокручивает страницу с клавиатуры, обслуживает window.scrollY / scrollTo, нормально делает печать и полностраничные скриншоты.На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh.
Проблема в том, что отказаться от всего этого очень легко. Классический app shell:
html, body { height: 100%; overflow: hidden }и потом
height: 100vh; overflow: auto на wrapper — визуально страница продолжает совершенно нормально скроллиться, только теперь скроллится не документ, а вложенный контейнер. Ещё более неприятный вариант — сочетание height: 100% и overflow-x: hidden: из-за правил overflow body тоже может незаметно превратиться в scroll container.Проверяется смешно просто: прокрутить страницу и посмотреть
window.scrollY. Если там всё ещё 0, скроллится что-то другое. Автор дальше разбирает типичные случаи — full-height layout, fixed header/sidebar, горизонтальный overflow, блокировку скролла под modal — и показывает, как оставить основной скролл браузеру. Например, использовать min-height: 100svh вместо фиксированного 100vh, position: sticky вместо app shell с отдельным скроллом, а для обрезки горизонтального overflow — clip вместо hidden.Ссылка ещё раз: The root scroller and how not to lose it
#css #scroll #root #appshell
❤9
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Кто-нибудь, остановите это безумие!
Очередная библиотека подсветки синтаксиса — twinkleplop. Очередные рекорды скорости и размера побиты! Очередное API улучшено.
Можно конечно попробовать разобрать архитектуру, например: в основе твинклплопа — конечный автомат. Но кому это интересно? Не, если кому-то интересно, вот: https://twinkleplop.pngwn.at/docs/architecture
Но лично меня распёрло от их мини-игры на главной странице :)
Я вот в 50 секунд уложился.
#tool #syntax #highlight
Кто-нибудь, остановите это безумие!
Очередная библиотека подсветки синтаксиса — twinkleplop. Очередные рекорды скорости и размера побиты! Очередное API улучшено.
Можно конечно попробовать разобрать архитектуру, например: в основе твинклплопа — конечный автомат. Но кому это интересно? Не, если кому-то интересно, вот: https://twinkleplop.pngwn.at/docs/architecture
Но лично меня распёрло от их мини-игры на главной странице :)
Я вот в 50 секунд уложился.
#tool #syntax #highlight
🔥7❤6
#релиз дня
Похоже, следующим коллегой разработчика станет не один ИИ-агент, а целая команда роботов.
В SourceCraft от Яндекса появилась возможность подключать автономных ИИ-агентов, которым можно поручать задачи прямо в обсуждениях GitLab. Причём это не очередной чат, в который нужно вручную копировать код и контекст. Агент работает под собственной учёткой, получает задачу, самостоятельно её выполняет и возвращает результат на ревью.
Самое интересное — что происходит, если в процессе что-то пошло не так. Не хватает данных или нужно согласовать решение? Агент сам обращается к команде. То есть разработчик распределяет работу между ИИ-исполнителями, подключается к сложным решениям и проверяет результат.
Не то чтобы разработчиков избавили от общения, конечно. Просто теперь ещё один участник будет писать в треде :)
Агенты могут заниматься разработкой, проверкой безопасности кода и другими задачами. Работать с ними можно не только через GitLab, но и из VS Code, командной строки, мессенджеров и веб-интерфейса SourceCraft.
При этом компании смогут подключать собственных агентов, в том числе созданных в Yandex AI Studio, и настраивать их под конкретные процессы разработки.
И вот тут, кажется, самое интересное. Получается уже не помощник, которому время от времени пишут промпты, а отдельный контур разработки, где над проектом одновременно работают люди и несколько ИИ-агентов.
То есть агенту теперь мало уметь писать код. Нужно ещё научиться нормально работать с коллегами.
#ai #agents #sourcecraft
Похоже, следующим коллегой разработчика станет не один ИИ-агент, а целая команда роботов.
В SourceCraft от Яндекса появилась возможность подключать автономных ИИ-агентов, которым можно поручать задачи прямо в обсуждениях GitLab. Причём это не очередной чат, в который нужно вручную копировать код и контекст. Агент работает под собственной учёткой, получает задачу, самостоятельно её выполняет и возвращает результат на ревью.
Самое интересное — что происходит, если в процессе что-то пошло не так. Не хватает данных или нужно согласовать решение? Агент сам обращается к команде. То есть разработчик распределяет работу между ИИ-исполнителями, подключается к сложным решениям и проверяет результат.
Не то чтобы разработчиков избавили от общения, конечно. Просто теперь ещё один участник будет писать в треде :)
Агенты могут заниматься разработкой, проверкой безопасности кода и другими задачами. Работать с ними можно не только через GitLab, но и из VS Code, командной строки, мессенджеров и веб-интерфейса SourceCraft.
При этом компании смогут подключать собственных агентов, в том числе созданных в Yandex AI Studio, и настраивать их под конкретные процессы разработки.
И вот тут, кажется, самое интересное. Получается уже не помощник, которому время от времени пишут промпты, а отдельный контур разработки, где над проектом одновременно работают люди и несколько ИИ-агентов.
То есть агенту теперь мало уметь писать код. Нужно ещё научиться нормально работать с коллегами.
#ai #agents #sourcecraft
👍3❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересекаться.
Задача вроде простая: есть декоративный элемент, его позиция и размер плавают, рядом контент. Нужно скрыть декор не по
Решение довольно извращённое: через Anchor Positioning он создаёт невидимый
То есть CSS всё ещё не умеет спросить «эти два элемента пересеклись?», но если достаточно долго смотреть на Anchor Positioning,
Поддержка, разумеется, пока не универсальная, поэтому сам Шадид рассматривает это как progressive enhancement.
Ссылка: https://ishadeed.com/article/css-detect-overlap/
#css #scroll #overlap
Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересекаться.
Задача вроде простая: есть декоративный элемент, его позиция и размер плавают, рядом контент. Нужно скрыть декор не по
@media, а именно когда между ними заканчивается место.Решение довольно извращённое: через Anchor Positioning он создаёт невидимый
.measure между элементами, добавляет туда псевдоэлемент фиксированной ширины и ждёт, когда контейнер начнёт overflow'иться. Дальше Scroll-driven Animations используются вообще не для анимации, а как детектор этого overflow: timeline переключает CSS-переменную, а style query уже скрывает нужный элемент.То есть CSS всё ещё не умеет спросить «эти два элемента пересеклись?», но если достаточно долго смотреть на Anchor Positioning,
timeline-scope, overflow и container queries — оказывается, можно заставить его ответить.Поддержка, разумеется, пока не универсальная, поэтому сам Шадид рассматривает это как progressive enhancement.
Ссылка: https://ishadeed.com/article/css-detect-overlap/
#css #scroll #overlap
👍7👏2🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вводом пользователя, но не выше определённого значения:
Современные единицы измерения, конечно, крутая штука :)
Автор
#css #textarea #lh
Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вводом пользователя, но не выше определённого значения:
𝚝𝚎𝚡𝚝𝚊𝚛𝚎𝚊 {
𝚏𝚒𝚎𝚕𝚍-𝚜𝚒𝚣𝚒𝚗𝚐: 𝚌𝚘𝚗𝚝𝚎𝚗𝚝;
𝚖𝚊𝚡-𝚑𝚎𝚒𝚐𝚑𝚝: 𝟻𝚕𝚑;
}
Современные единицы измерения, конечно, крутая штука :)
Автор
#css #textarea #lh
❤7👍2