#статья дня

Chrome опять выходит на связь!

Я скучаю по временам, когда можно было делать проекты под киоски :) Вообще ничего не парило, берёшь последний Chromium и кладёшь на все стандарты.

Возможно, кому-то и сейчас так везёт...

Короче, я к чему. Нет, я не про новости, согласно которым Google хотят заставить продать Chrome (при этом уважаемые эксперты кругом уже начали хоронить веб, как будто других движков у нас нет).

Я про то, что Chrome в очередной раз ломает искусственные барьеры!

Когда-то мы с вами уже обсуждали ситуацию с несчастной комбинацией элементов fieldset+legend и что они не могли быть flex-элементами. Ну, так исторически сложилось (они были виджетами ОС).

Оказывается, похожая ситуация имеется и с элементами details+summary!

Им до Chrome 131 нельзя было задать никакой display, кроме block. Эффекта бы не было.

Надеюсь, глядя на видео вы уже поняли, что там происходит :) А происходит комбинация display: flex на details и анимация до auto через interpolate-size.

Статья на тему: https://developer.chrome.com/blog/styling-details

А теперь, чтобы пресечь инсинуации: в Firefox и Safari всё прекрасно выглядит! Не работает лишь анимация. Ограничений на display у details нет, всё работает как и надо.

Я пока всё ещё считаю использование details для аккордеона натяжкой, но направление задано, что не может не радовать.

#css #ui #details

#статья дня

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

Поэтому я решил найти хоть что-то визуальное, чтобы начать вхождение в тему.

И, не поверите, таки нашёл!

Итак, встречайте. Деревья поиска aka B-деревья и их использование в индексах баз данных: https://planetscale.com/blog/btrees-and-database-indexes

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

Объясняются принципы работы деревьев, принципы их хранения на диске и алгоритмы поиска, например, упорядоченных значений.

Это для многих (включая меня) немножко хард-левел, поэтому на данный момент пост на правах закладки и читаю я его параллельно с Виртом и Википедией.

Но как же красиво, ну.

#algorithms #db #index

Уточнение! Не "картинка сохранится на сервере", а "картинка останется в форме, даже если форма ещё не была отправлена".

#такое дня

Раньше говорили, что каждый программист должен написать свои Жизнь и Тетрис.

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

А какие мнения слышали вы?

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

Итак, помните пример современного глитч-искусства на примере Твиттера?

Ну я про React Scan, который показывает число ререндеров на странице, вот: https://www.tg-me.com/htmlshit/3285

Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:

npx react-scan@latest <URL>

...и поехали.

Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.

#react #render #devtools

#расширение дня

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

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

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

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач

#заметка дня

Сегодня немного о том, как же хорошо иметь отклик аудитории в соцсетях.

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

И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/

Ну, условно, вот такой код:

let array = new Array(10000);
for (let i = 0; i < 10000; i++) {
  for (let j = 0; j < 100000; j++) {
    array[i] = array[i] + j;
  }
}

Если коротко, то получилось, что JS в Node.js в 30 раз медленнее, чем C, скомпилированный в gcc с -O1 (минимальной оптимизацией).

Ох, как же его начали макать... Опустим очевидные моменты вроде тех, что никому в реальной жизни не интересно, как там миллиард циклов выполнится. Что гораздо интереснее — это как всё улучшить.

Как оказалось, улучшать есть что! На иллюстрации к посту вы видите результат коллективной работы большого числа людей. Как видим, JS лишь в 2-2.5 раза медленнее: https://benjdd.com/languages/

Как так вышло? Очень просто: know your tools.

Например, прям из простейшего: если в JS создать массив как new Array(10000), он будет заполнен мусором и готов будет принимать в себя любые типы элементов. А если new Array(10000).fill(0) — движок оптимизирует код под работу с целыми числами. И буст будет просто огромный.

Вот вам и динамический язык, кто бы мог подумать. Дальше — больше (new Int32Array(10000), например).

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

Особенно если вы собираетесь вложенные циклы миллиардами итераций выполнять.

#performance #test

#фишка дня

Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.

Выглядит он прям максимально просто:

  <filter id="outline">
    <feGaussianBlur stdDeviation='3'/>
    <feComponentTransfer>
      <feFuncA type= "table" tableValues="-3 4 -3"/>
    </feComponentTransfer>
  </filter>

А результат даёт интересный, на видео.

Как минимум, это очень применимо в двух случаях:

1. Если есть иконка в PNG, но нужно срочно сделать её контурной
2. Для генерации разных игр вроде «сопоставь объект с его формой» для детей. Весьма популярная тема, кстати.

Лучше всего работает на картинках с чёткими раздельными элементами. Но даже для более простых вариантов я уже нашёл применение и распечатал ребёнку стикеров :)

#css #svg #filter

#ссылка дня

Сегодня день такой, про SVG-фильтры.

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

Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.

Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!

Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).

Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders

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

Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.

Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://www.tg-me.com/htmlshit/1416

#svg #filters #html #shaders

#такое дня

Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»

Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison (на русском)

#optical #illusion #perception #design #бородач

#заметка дня

Тут в нашем чатике 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://www.tg-me.com/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

#библиотека дня

Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.

Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles

Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.

А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html

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

Да, снег там тоже имеется.

#particles #effect #бородач

#фишка дня

Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://www.tg-me.com/htmlshit/3061

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

А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?

Да везде, буквально.

И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.

Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.

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

А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.

Как вам идея, котаны?

#vscode #extension #bisect

#ссылка дня

А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! Aka advent calendar.

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

1. Итак, нестареющая классика — Advent of Code. 24 задачи, решать которые можно на любом доступном языке программирования и любыми методами: https://adventofcode.com/

Есть у меня товарищи, которые в прошлом году чуть ли не лидировали в общем зачёте.

При этом, производительность не важна. Это вам не Литкод.

2. Advent of TypeScript: https://www.adventofts.com/

Не хватает типов на своей тырпрайзной работе? Вот напиши ещё!

3. Advent of CSS: https://www.adventofcss.com/

Поверстаем? :)

4. Advent of QA: https://www.rusau.net/qa-advent

Тестировщикам тоже досталось! Первый и единственный в подборке календарь, рассчитанный до 31 декабря :) Так что, если предыдущих вам было мало...

Добавляйте свои календари, я бы хотел, например, найти адвент для продактов!

Стоит отметить, конечно, что почти все эти календари рассчитаны до 24 числа. Так что придумайте себе развлечение на оставшуюся неделю — в российской и пост-советской традиции календари если и прижились, то до Нового года, а не Рождества :)

#advent #calendar

#статья дня

Думали, научились отличать overflow: scroll от overflow: auto и всё на этом?

Не, так не пойдёт. И дело даже не в том, что у нас есть ещё visible и hidden. Дело в том, что у нас есть clip! И вот тут-то и начинается самое интересное.

Когда придумывали hidden, задача была простая: скрыть всё, что не помещается в контейнер, чтобы посетителю не пришлось скроллить. Вообще.

Но тут у нас появились усложнения процесса скролла: position: sticky и ScrollAnimation API. И с обоими есть проблемы.

Видите ли, согласно спецификации overflow: hidden создаёт инстанс скролла (контейнер), который буквально перехватывает взаимозействие пользователя с ним, но при этом — позволяет обратиться скриптом к модели и подвинуть контейнер куда надо. Подробнее есть у Брамуса: тык.

А что это значит для нас, как пользователей? Что ни sticky, ни таймлайн-анимации, определённые в CSS, работать не будут, потому что hidden сломает механизм поиска ближайшего доступного скролла.

А ещё, браузер буквально не даст вам адекватно настроить индивидуальное скрытие по осям, он всегда выставит auto на вторую ось, что приведёт к скроллу.

И тут на помощь приходит clip! Он не создаст скролл-контейнер и позволит браузеру правильно обрезать и анимировать элемент, а пользователю — с ним провзаимодействовать.

Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/

Самый говорящий пример из неё вынесен в иллюстрацию к посту.

#ссылка дня

Очень коротенькое дополнение в коллекцию адвент-календарей, которую мы собрали вчера: https://www.tg-me.com/htmlshit/3317

Правда, на сей раз без задачек :)

Календарь статей по производительности веба!

Web Performance Calendar: https://calendar.perfplanet.com/2024/

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

Темой первого декабря был Закон Гудхарта: «Когда мера становится целью, она перестает быть хорошей мерой», очень хорошая вводная статья о том, что не надо бездумно гнаться за показателями.

Темой вчера стал общий обзор терминов.

А сегодня — а пока не знаю, ждём открытия окошка!

#advent #calendar #webperf #performance