#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).

#css #scroll #state #бородач

#статья дня

Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски.

Если добавят оверлейные кнопки — станет, конечно, чуть удобнее.

И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт.

Статья вот: https://ishadeed.com/article/too-early-breakpoint/

И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time.

Заняли половину экрана сайтом — и уже непонятно, что и почему происходит.

Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности.

P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны!

https://notepad-plus-plus.org/news/hijacked-incident-info-update/

#css #media #adaptive

#инструмент дня

Монорепозитории имеют неприятное свойство разрастаться. Сюрприз-сюрприз.

Со временем файловая структура перестаёт что-то говорить: папок много, вложенность глубокая, понять где живой код, а где мёртвый — сложно.

Git Truck решает эту проблему через визуализацию репозитория. Он строит интерактивную «карту» проекта на основе git-истории: видно размеры файлов и директорий, активность изменений, вклад разных авторов, а также как структура менялась со временем.

Инструмент запускается локально, без облаков и интеграций, и просто открывает браузер с наглядным представлением репо. Полезная штука, когда нужно быстро разобраться в большом монорепозитории или посмотреть на кодовую базу целиком, а не по папкам.

https://github.com/standardgalactic/git-truck

#git #dev #tool

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.me/htmlshit/2639

Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween #бородач

#статья дня

Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.

Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)

Так вот, Брамус заявляет: “Календарь – это сетка!”.

Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.

https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/

На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!

В общем, на этом войне календарей должен быть положен конец.

#css #grid #calendar #бородач

#cтатья дня

Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.

Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).

Ладно, сегодня я конкретно хочу поговорить о состоянии scrolled и stuck для контейнеров. Очевидно, scrolled — это когда мы прокрутили в какую-то сторону, а stuck — это когда при использовании position: sticky мы можем определить, закрепился элемент, или нет.

Я тут немного пропустил, но в Chrome 133 состояние stuck таки появилось:

.scroll-ancestor {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .child-of-scroll-parent {
    /* Magic happens here! */
  }
}

Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/

Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния scrolled, да-да, с указанием направления!

/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
  .main-header {
    transform: translateY(0);
  }
}

Ну это ли не чудо? А если указать inline или block, можно скрыть/показать индикаторы возможности скролла вообще. То же касается и индивидуальных направлений.

Кстати, есть и статья на MDN.

Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.

Но бомбить от недоделанности новых фишек пока не перестало.

#css #scroll #state

Здравствуйте, товарищи!

Для начала, пара слов о себе. Валентин Ульянов - разраб, в IT 10+ лет. Последние годы занимался разработкой инструментов и делал редакторы документов, типа Word и Excel. Еще делаю свой open source проект. Выступаю на конференциях и веду IT-сообщество в Питере на 1000+ человек. Мечтаю стать спецом мирового класса в компьютерных науках! А дальше как раз пойдет речь о моем проекте

mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc

Ключевые особенности mlut

1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит

Что реализовано на сегодня

- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница

Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.

Планы по развитию

- добавить больше возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок

А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!

#баг дня

Как вы думаете, что обозначает тип {}?

Ну, буквально:

type b = {};

Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да!

А может, null или undefined ? Нет. Вот тут — нет. Песочница.

Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало.

Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>.

Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript.

В чём же баг, спросите вы?

А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче.

Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
>;

И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз.

Решение пришло откуда не ждали:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
> & {};

Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался.

По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение.

В VS Code, кстати, проблемы не наблюдается.

После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс.

А как ваши дни проходят? 🙂

#jetbrains #typescript #lsp #бородач

#тред дня

Давно я не пользовал этот тег. Что мы делаем с тредами дня из X/Твиттера (Мастодона и так далее)? Правильно, воруем!

В этот раз воруем тред Антона C++ про компилятор, который был написан ИИ. Ссылку тоже прилагаем.

На прошлой неделе показали компилятор Си, собирающий ядро linux, ffmpeg и много другое + проходящий 99% GCC тестов, а сам компилятор написан полностью ИИ.

Оператор этой мультиагентной системы только задавал направление. За 2 недели сожгли 20к$ и получили вот такой результат.

ИИ-инфлюенсеры и позитивисты высрались в очередной раз, что скоро будет эпоха одиночек, корпорации и команды не нужны, через 2 года все программисты пойдут искать работу в ноготочках или где там ещё машина не заменит человека. Почитайте
@platoff в качестве такого примера.

В этом плане они совершенно правы, мир меняется и скоро изменится ещё сильнее. Если вы уже сейчас не изучаете, или, что ещё лучше, не ищите подходы к разработке с помощью/через ИИ, то скоро вы будете профнепригодны.

ИИ это новый git и IDE, некоторые уже спрашивают на собеседованиях, но через 3 года уже будет стыдно не уметь, а через 5 стыдно спрашивать (git и IDE на это потребовалось лет 10-15).

А теперь самое важное, на что ИИ позитивисты закрывают глаза, но что полностью и подчистую разматывает их позицию о том, что программисты останутся без работы: компилятор Си на нейрослопе - неоптимизирующий.

Да, он производит код, способный работать на парочке платформ, но даже при прохождении 99% тестов это не 1% того, что требуется от компилятора. От компилятора требуется не производить код, но производить эффективный код.

И эффективный код нужен для сотен разных чипов, со своими наборами расширений, десятка операционных систем и ещё вороха стандартов, каждый из которых хочет решить свою проблему. И всё это работа инженеров и программистов, которая длится 40 лет.

Машина может написать код, но не может найти и описать проблему реального мира. Если вы активно пользуетесь ИИ, то вы знаете, что дать описание проблемы не значит получить решение, скорее всего вы получите нейрослоп, который удовлетворит поверхностное любопытство, но не более.

Плохие новости в том, что если найти правильный подход к использованию ИИ, мы и правда будем лучше и эффективнее как программисты, а значит нам придётся это сделать.

Машины отбирают наше любимое занятие - писать код, но с другой стороны, может быть, они дадут нам расти дальше, куда нам не давала расти постоянная необходимость писать код.

Жаль, конечно, что нас не спросили, но что уже теперь поделать, будущее яркое и нам всё ещё есть в нём место, но только мы в этом будущем уже не будем прежними.

То есть ничего нового не произошло, осталось только это принять.

/thread

А теперь от автора канала: если хотите здорово посмеяться, вот вам ссылка на issues это компилятора, где у людей не собирается Hello World: https://github.com/anthropics/claudes-c-compiler/issues/1

Дивный новый мир.

#ai #llm #future

#фишка дня

Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще.

Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а text-overflow: ellipsis просто обрезает концовку.

Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился!

Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈

И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100

Итак, суть идеи:
1. Дублируем строку в атрибуты контейнера и элемента
2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент
3. Ну, собственно, всё :)

Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом.

Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно.

#css #truncate #middle #cq

#ссылка дня

Apple славится не только тем, что достаточно медленно развивает Safari в угоду (?) производительности на ватт и безопасности, но и тем, что добавляет в движок очень много фишек, делающих интеграцию WebView в приложения на macOS и iOS проще. Часть, казалось бы, нативных Apple Music, Apple Maps и так далее — это WebView, а вы и не догадывались.

И вот одной из таких фишек стало добавление атрибута switch к обычным чекбоксам. Очевидно, превращающим галочки в переключатели. Да, семантика выходит иная.

Поспольку остальные браузеры не спешат это добавлять (как раз по причине того, что это, ну, разные же элементы, атрибут выглядит странно), Томас Стайнер реализовал полифилл: https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

Демонстрацию можно посмотреть там же.

Ссылка на репо: https://github.com/whatwg/html/pull/9546

Как считаете, пора делать переключатели базовыми инструментами форм, или нет?

#css #switch #safari

#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox #бородач

#видео дня

Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points.

И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости.

Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное.

Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить.

Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее.

И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms

Стоит посмотреть. Много здравых мыслей. Как минимум, вы решите для себя: более усердно относиться к оценке или же просто ограничить число задач на спринт.

Не болейте.

#agile #teamlead #scrum #бородач

🔥 Девушка без навыков разработки запустила AI-бота и вышла на первые продажи за месяц

Аня из комьюнити @its_capitan заметила: люди учат английский годами, но говорить не могут. И тогда она сделала Telegram-бота, который общается с тобой голосовыми на английском и исправляет ошибки как живой собеседник.

Что в итоге:
— ~700 пользователей за первый месяц
— первые 16 оплат
— первая выручка: ~$200
— подписка: $8/мес
— сделано на n8n + OpenAI без разработчиков

Не было ни команды, ни инвестиций, ни кода.

Главное — не технология.
Главное — простая понятная ценность.

Таких запусков в канале уже десятки. Показываем честно: цифры, провалы, рост и продвижение. Без теорий. Только реальные метрики и запуск в реальном времени.

👉 @its_capitan

Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqx4pHSC

#игра дня

Забавно, что в играх мы спокойно управляем экономикой, считаем ресурсы и думаем на несколько шагов вперёд. А когда речь про инфраструктуру — это уже «что-то сложное и серьёзное».

Нашёл проект — server-survival. Это по сути симулятор, где ты строишь свою серверную систему и пытаешься, чтобы она не развалилась. Есть деньги, есть доход от трафика, есть репутация. Всё, что добавляешь в архитектуру, стоит денег. Всё, что падает, бьёт по карману.

Нужно решать: масштабироваться заранее или рискнуть, держать запас прочности или экономить, как пережить внезапную атаку и не уйти в минус.

Мечтал побыть клауд-архитектором? Вперёд:
https://github.com/pshenok/server-survival

#cloud #game

#статья дня

Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.

И суть в том, что подсветка кода сделана... шрифтом.

Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/

И да!

Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.

Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!

В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.

Есть обсуждение на HackerNews, вдруг кому интересно.

И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv

Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts

В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.

#opentype #fonts #colr #бородач

#статья дня

Оказывается, ignore-файлы — это не только .gitignore. Почти каждый инструмент в экосистеме тащит свою версию формата, и хотя все говорят «поддерживаем синтаксис .gitignore», нюансы часто отличаются.

Хороший пример — .npmignore. Если его нет, npm ориентируется на .gitignore. Но как только вы добавляете .npmignore, он полностью заменяет правила из .gitignore. В итоге можно случайно опубликовать в пакет то, что в Git было исключено, или наоборот — не опубликовать нужные файлы. Поведение похоже, но не идентично, и легко запутаться.

В статье перечисляется целый зоопарк `ignore`-файлов:

.gitignore — Git
.dockerignore — Docker
.npmignore — npm
.prettierignore — Prettier
.eslintignore — ESLint
.stylelintignore — Stylelint
.hgignore — Mercurial
.containerignore — Podman/Buildah
.gcloudignore — Google Cloud CLI
.vercelignore — Vercel
.slugignore — Heroku
.cfignore — Cloud Foundry
.helmignore — Helm
и т. д. и т. п.

Вывод простой: одинаковое название не гарантирует одинаковое поведение. Если инструмент что-то «внезапно» включает или исключает — почти всегда дело в деталях реализации ignore-логики.

Собственно, ссылка: https://nesbitt.io/2026/02/12/the-many-flavors-of-ignore-files.html

#gitignore #ignore

#ссылка дня

Каждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным).

Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу.

Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после.
Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации.

https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом

#заметка дня

В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"

Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!

Он очень давно и хорошо поддерживается, так что почему бы и нет.

Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.

И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100

Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!

Всем бу, котаны!

#css #placeholder #svg #sprite #бородач

#фишка дня

CSS anchor positioning aka якоря могут реально поменять то, как мы с вами реализуем интерфейсы, требующие графового представления: CJM, майндмапы, блок-схемы, пайплайны...

Темани Афиф недавно сделал пример, соединив круги стрелками и набросив немного JS для drag&drop: https://css-tip.com/connected-circles/

Потом немного улучшил: https://css-tip.com/connected-circles-2/

И пару дней назад пошёл ва-банк и представил буквально реализацию поиска кратчайшего пути в графе: https://css-tip.com/graph-theory/

Выглядит, конечно, весьма сложно. Но следующим шагом, видимо, будет транспиляция Mermaid в CSS... Зато самому алгоритм стрелок реализовывать не придётся! 😂️️️️️️

#css #anchor #graph

#ссылка дня

Дамы и господа, мы зашли слишком далеко.

Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS!

Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через

«Процессорный цикл» — это просто тик анимации. Пять герц в эквиваленте.

ПЯТЬ. Не гигагерц, а герц.

Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной.

Как это выглядит в упрощённом виде.

Тик процессора:

@property --ip {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tick {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.cpu {
  animation: clock 0.1s steps(1) infinite;
}

@keyframes clock {
  to {
    --tick: calc(var(--tick) + 1);
  }
}

.cpu {
  --ip: calc(var(--ip) + var(--tick));
}

Анимация создаёт шаг. На каждом шаге меняется состояние.
От состояния зависит, какие инструкции сработают дальше.

Ввод — тоже без JS. Например, зажатая кнопка:

.key:active ~ .cpu {
  --running: 1;
}

.cpu {
  --running: 0;
  --ip: calc(var(--ip) + var(--running));
}

Пока кнопка нажата — переменная меняется и влияет на вычисления.

В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их.

Практической пользы — ну, нет.

Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда.

Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение.

Просто пойдите и поиграйте в это. Ощущения невероятные, хрен с ней, с применимостью на практике, честное слово. Это целый компьютер! Вы можете даже программы для него компилировать с C на x86asm. Буквально.

#css #cpu #x86 #hack