#такое дня

Теперь, когда вас попросят на собеседовании написать код, который выводит сам себя — вы знаете, что делать:

($=_=>`($=${$})()`)()

Послать нафиг, конечно же

#js #бородач

#фишка дня

Как узнать, откуда была вызвана интересующая нас функция?

Правильный ответ — воспользоваться дебаггером.

Или console.trace().

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

Если не используется ‘use strict’ (почему, кстати?) можно воспользоваться нестандартным свойством Function.caller:

function hello() {
console.log(“caller is " + hello.caller);
}

…или устаревшим arguments.callee.caller

function hello() {
console.log(“caller is " + arguments.callee.caller.toString());
}

Но это не выведет весь стек и вообще в нормальном коде не сработает. Поэтому, можно красиво схитрить сымытировав ошибку:

function Hello() {
console.log(“caller stack”, new Error().stack);
}

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

#js #caller #error #stack #бородач

#заметка дня

В @htmlshitchat всплыл вопрос: "А как вывести на экране блокировки смартфона виджеты управления музыкой и плейлистом? След, пред и проигрывание/пауза?"

Ведь если просто запустить audio, ничего такого не получится. Да и плейлист нужен же...

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

Как это редко бывает, автор вопроса приложил решение!

Итак, весь секрет в MediaSessionAPI: добавляем обработчики действий previoustrack и nexttrack и вуаля.

Даже демо есть! Это прям нечто невероятное: https://codepen.io/ArsGal/pen/bGPbKML

Не стесняйтесь спрашивать и отвечать в чате. Это помогает всем :)

#js #music #controls

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.

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

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

#фишка дня

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

А вот можно! Как в этом примере от Мэтта Покока.

И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.

#js #event #abortsignal

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

Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8

#css #js #performance #бородач

#статья дня

Даже две!

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

Конечно, сама ситуация довольно странная, и выглядит так: если у вас имеется замыкание, в котором вы обратились к некоему объекту, после выполнения функции в замыкании выделенная память не очистится. Вот: https://jakearchibald.com/2024/garbage-collection-and-closures/

То есть у нас не утечка памяти, но «захват и удержание»:

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(() => {
    console.log(bigArrayBuffer.byteLength)
  }, 1000)

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo();      

В случае, когда у нас нет возвращаемой функции отмены — замыкания не создаётся и сборщик мусора отлично работает.

Так вот, Нико Прананта нашёл решение для данного конкретного случая! И решение это потрясающее: нужно оставить ссылку на буфер за пределами замыкания: https://www.nico.fyi/blog/memory-issue-in-javascript-and-closures

А как это сделать?

Передать буфер следующим аргументом в setTimeout!

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(
    (buffer) => {
      console.log(buffer.byteLength)
    },
    1000,
    bigArrayBuffer
  )

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo()

Я рекомендую пробежаться по обеим статьям, но статья Нико содержит в себе ещё и описание методов отладки таких случаев, что может пригодиться.

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

#js #memory #performance

#заметка дня

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview #js #focus #бородач

#видео дня


Итак, системы сборки проектов. Бандлеры, по простому. Старые и современные. От Webpack до OXC.

Зачем были нужны и как появились. Как развивались и при чём тут Rust. Почему oxc быстрее swc в пять раз, но это не всегда имеет значение.

На всё это отвечает Девон Говетт, создатель Parcel.js и разработчик проектов React Aria и React Spectrum в Adobe: https://www.youtube.com/watch?v=JUS6EPMbk0U&feature=youtu.be

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

Если вы, котаны, запутались в JS-тулинге — вот самое оно.

#js #bundler #swc #webpack

#фишка дня

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

И это API document.getAnimations(), позволяющий не только получить список всех CSS-анимаций, но и, внимание, выставить промис и дождаться их выполнения! 🤯

const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)

Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX

*с некоторых пор я начал форкать пены, потому что пропадают иной раз

Теперь о применимости.

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

Ну а разработчикам промо-сайтов важность синхронизации действий и анимаций объяснять не надо.

Отличный пример забытых технологий 🙂

Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?

А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...

#css #js #animations #promise #бородач