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

#фишка дня

Не так давно мы на работе обсуждали, как показывать и обрезать разного рода 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

#тред дня

Давно я не пользовал этот тег. Что мы делаем с тредами дня из 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

#баг дня

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

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

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 #бородач

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

Для начала, пара слов о себе. Валентин Ульянов - разраб, в 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 инструмент тоже может быть продуктом!

#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

#статья дня

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

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

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

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

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

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

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

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

#заметка дня

Тут в нашем чатике 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 #бородач

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

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

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

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

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

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

#git #dev #tool

#статья дня

Тут 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

#фишка дня

Использование 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 #бородач

#игра дня

Давненько не было чего-то необычного.

Впрочем, если вы не фанат Dwarf Fortress, конечно.

Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.

Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.

Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.

🎮 https://untrustedgame.com/
📂 https://github.com/AlexNisnevich/untrusted

#game #js #бородач

Проект от подписчика!

Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.

Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!

Привет! Меня зовут Игорь

Хочу поделиться расширением, которое я изначально сделал для себя, а потом решил выложить публично - AI Chat Messages Toolkit. Еще сделал лендинг для продвижения и связи с будущими пользователями

Мой юзкейс
Часто использую AI-чаты для ресерча: в транспорте, перед сном, просто накидать идеи.
Проходит время - и я уже не помню, *где именно* задавал нужный вопрос. Начинается бесконечный скролл длинного чата

Я решил это упростить

Что делает расширение
• Парсит DOM страницы чата локально
• Находит мои сообщения
• Показывает их списком в боковой панели
• Клик по сообщению > чат скроллится к нужному месту
• работает в ChatGPT, Claude, Perplexity, Gemini и Copilot

Важно
Никакие данные не собираются, не сохраняются и никуда не отправляются - всё происходит прямо в браузере на открытой странице

Дальше думаю про Pro-версию. Например, шаринг полезных Q&A-пар в Notion или куда-нибудь еще

Если вы тоже используете AI-чаты для ресерча - буду рад фидбеку, идеям и юзкейсам в комментариях

#ссылка дня

Вчера — впервые за шесть лет — побывал на местном JS-митапе, aka HelsinkiJS.

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

И как-то так получилось, что помимо пива и пиццы были и доклады. И вот один из них — «Как нарисовать карту?» — был весьма интересен и его результат прекрасно подходит под формат канала.

Автор — Скотт Стрит — постарался объяснить и показать, как работают библиотеки отрисовки карт. Какие форматы, какие решения. Ну и, собственно, шаг за шагом рассказал и показал процесс конвертации мировых координат в координаты элементов сетки и отрисовки их в SVG.

Например, как из описания линии формата MapLibre (там protobuf, но в виде текста как-то так):

{
  "layers": [
    {
      "version": 2,
      "name": "roads",
      "extent": 4096,

      "features": [
        {
          "id": 42,
          "type": "LINESTRING",

          "tags": [0, 0],

          "geometry": [
            9,
            1024, 2048,
            26,
            2048, 0,
            1024, 1024,
            2048, 0
          ]
        }
      ],

      "keys": ["class"],
      "values": [
        { "string_value": "primary" }
      ]
    }
  ]
}

Путем прямого чтения команд:

9                → MoveTo, count=1
1024, 2048       → dx, dy

26               → LineTo, count=3
2048, 0          → dx, dy
1024, 1024       → dx, dy
2048, 0          → dx, dy

...получается описание кривых в SVG. Тут надо понимать, что сами плитки — тайлы — кодируются как квадрат 4096*4096, а, стало быть, координаты — относительно тайла.

К сожалению, слайдов доклада в наличии нет, но есть, собственно демо и репозиторий.

Конечно, там сейчас всё достаточно минималистично — дороги, парки, дома — но если вам было интересно, как это всё работает — подойдёт прекрасно.

#svg #maplibre #map

#такое дня

Я уже как-то участвовал в нескольких спорах на тему того, что TUI — text-based ui interface — это не больше чем фишечка, такой себе ретрофутуризм.

Ведь каждому очень хочется себя почувствовать хакером из фильмов, если уж до интерфейсов Джарвиса из Железного Человека мы пока не доросли.

Впрочем, как мне справедливо заметили: «А минусы будут?», — да может и нет их...

Но что бы вы думали, взорвавший популярность TUI в последние пару лет Claude Code будет написан на условном C или Python?

Наверное, как сорок лет назад Vim, Emacs и среды Borland Turbo? Ну или ncurses на худой конец там, ведь проблема вывода текста кажется давно решённой?

Нет, там React :) Они рендерят сцену целиком, а потом процессят вьюхи чтобы вывести их текстом, предварительно сравнивая с предыдущим рендера.

Зачем? Да никто не знает, захотелось парням, кто мы такие, чтобы их судить.

Просто экран клода так и будет продолжать мерцать. Обещают, что чуть поменьше, чем раньше. Ведь 16ms на фрейм им теперь хватает с трудом.

Выводов не будет, нет никаких сил. Просто по ссылкам в посте пройдите, там достаточно интересно.

#claude #react

#видео дня

Решил сохранить эту нестареющую классику прямо на канале. Где-то доступен и оригинал на ютубе, но я чот не смог его найти...

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

Поменялось ли что-то с тех пор?

Ну, нет.

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

P. S. в докладе есть не только описания неопределённого поведения, но и хрестоматийные примеры. Это теперь они хрестоматийные, конечно.

#такое дня

А вот вам и пример, почему важно знать и понимать наследие веба. Написал я, понимаете ли, пост про тег <plaintext> — https://t.me/htmlshit/3955 — и он сломал вёрстку на агрегаторе каналов Telemetr. В комментариях написали, спасибо :)

Сейчас это просто plaintext, а завтра — XSS? 😱

Не надо так, котаны.

P. S. пофиксили по моей просьбе.

#заметка дня

Вот то самое откровение, которое я обещал в новости о jQuery 4.0.

В Chrome 145 будет изменено поведение 100vw. Браузер будет учитывать ширину скроллбара, исключая горизонтальную прокрутку.

Ссылка: https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/

И да, это будет ломающее изменение.

Хотя, если честно, я не очень понимаю людей, которым вообще нужно было значение 100vw, это же дефолт блочных структур.

Старое поведение по факту годами создавало баг, с которым разработчики либо мирились, либо прятали его костылями — через calc.

Самый показательный момент — реальные цифры.

Через HTTP Archive было проанализировано 12 089 606 корневых страниц. Из них 324 866 сайтов, то есть примерно 2.7%, в принципе использовали calc() рядом с 100vw. При этом явные попытки компенсировать ширину скроллбара встречаются крайне редко: порядка 4 000 сайтов принудительно задают overflow: scroll на <html>, и всего несколько десятков страниц используют calc(100vw - …) именно для учёта скроллбара.

Вот комментарий в PR спеки: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1919428550

Это хорошо показывает реальную картину: подавляющее большинство разработчиков никогда не «считали скроллбар». Они либо избегали 100vw, либо жили с лишним горизонтальным скроллом, либо просто добавляли overflow-x: hidden. То есть проблема была массовой, а осознанно решали её — доли процента.

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

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

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

#css #scroll

#молния дня

А пока вы читали сообщение выше, оказалось, что вышел jQuery 4.0: https://blog.jquery.com/2026/01/17/jquery-4-0-0/

Кто-нибудь ещё использует jQuery для новых проектов? Или по-инерции?

С другой стороны, эта инерция всё ещё драйвит 70% веб-сайтов в мире... есть у меня интересная инфа на тему, попозже сегодня выкачу 🙂

#статья дня

Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!

Во втором дне календаря 2025 года речь идёт о теге <plaintext>. Это устаревший элемент, который запрещён стандартами, но до сих пор поддерживается браузерами.

Штука гениальная: как только браузер встречает <plaintext>, он прекращает разбор HTML. Всё, что идёт дальше, воспринимается как обычный текст, независимо от того, что там написано.

<body>
  <h1>Заголовок</h1>
  <plaintext>
  <div>Этот div не станет элементом</div>
  <script>alert('xss')</script>
</body>

В браузере и <div>, и <script> будут выведены как текст. DOM на этом месте обрывается, ошибок в консоли нет, с точки зрения браузера всё произошло корректно.

Существенная часть статьи посвящена тому, как <plaintext> ведёт себя при санитайзинге HTML. Разные санитайзеры обрабатывают его по-разному: кто-то удаляет, кто-то экранирует, кто-то оставляет в форме, которая всё равно влияет на парсинг. В результате один и тот же входной HTML после «очистки» может либо работать нормально, либо полностью ломать страницу.

Например, обнулить CSP.

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

#html #sanitize

#статья дня

Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.

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

Так вот, сегодня на поветске дня — как украсть любой React-компонент!

И в этом нам поможет React DevTools, любая сносная LLM-ка и вот эта инструкция: https://fant.io/react/

TL;DR
React-приложение хранится не только в DOM-представлении, но и в виде React Fiber — внутреннего дерева (тот самый виртуальный DOM), где видно, какой компонент и с какими пропсами создал разметку.

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

Эти примеры вместе с минифицированным кодом компонента скармливаются LLM, которая восстанавливает чистый React. Дальше идёт проверка: компонент рендерится с теми же пропсами, HTML сравнивается с оригиналом, а расхождения отправляются обратно модели. Компоненты собираются снизу вверх, от простых к составным. Анимации и сложные состояния чуток могут замедлить процесс, но для статичного UI он работает прям хорошо.

Дивный новый мир. А чтобы понимать внутренности Fiber, можно использовать инструмент со странным названием bippy: https://github.com/aidenybai/bippy, когда, что и почему отрендерилось.

#react