Рич Харрис — автор Svelte, Shimport и других библиотек — сегодня твитнул про свою интересную находку в коде three.js.

Если вам нужно удалить один элемент из массива, можно воспользоваться array.splice(index, 1). Но если у вас огромный массив, то splice() будет работать очень медленно, так как будет происходить сдвиг всех элементов (линейная сложность).

Для тех массивов, где порядок элементов не важен, разработчики three.js используют такой код для удаления элемента:

array[index] = array[array.length - 1];
array.pop();

То есть здесь удаляемый элемент заменяется последним элементом массива и последний элемент удаляется (константная сложность).

В комментариях к твиту пишут, что при разработке на ассемблере для RISC-процессора PlayStation 1 подобный трюк был очень распространён.

#algorithm #js #trick

https://twitter.com/rich_harris/status/1125850391155965952?s=21

Сегодня прочитал статью Прити Сэм про создание анимированных иконок сайта — "The Making of an Animated Favicon".

Для создания анимированной favicon, можно использовать canvas, в котором с течением времени (или как реакция на сигнал от сервера) будет рисоваться индикатор загрузки. После каждой перерисовки получившийся результат переносится в тег <link>:

const canvas = document.querySelector('canvas'),
// [...] тут код отрисовки [...]
favicon.href = canvas.toDataURL('image/png');

С примером из статьи есть проблема. Если перейти на соседнюю вкладку, то анимация в Chromium-based браузерах останавливается. Это возникает из-за того, что Chromium останавливает таймеры на неактивных вкладках. Чтобы обойти это ограничение, можно использовать web-воркеры.

#web #trick

https://css-tricks.com/the-making-of-an-animated-favicon/

В блоге Акселя Раушмайера недавно была опубликована новая статья — "Evaluating JavaScript code via import()".

Код, который использует модульную систему JS, не может быть выполнен с помощью eval(). Для того чтобы обойти это ограничение, можно использовать динамический импорт import() с закодированным кодом модуля в виде data URI.

Выглядит это так:

const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodedJs;
import(dataUri);

При желании можно получить доступ ко всем экспортируемым объектам. Также можно вставлять data URI прямо в статический импорт, и он будет работать.

Маловероятно, что вы будете использовать этот трюк. Тем не менее статья интересная, почитать стоит.

#esm #trick

https://2ality.com/2019/10/eval-via-import.html

На CSS-Tricks недавно была опубликована интересная статья Альвара Монторо про получение случайных чисел с помощью чистого CSS — "Are There Random Numbers in CSS?"

Суть трюка такая. Есть несколько элементов radio и соответствующих им label. Все лейблы накладываются друг на друга, чтобы в каждый момент времени кликабельным был только один элемент. C помощью CSS-анимации запускается цикл смены лейблов. С точки зрения пользователя неизвестно, какой лейбл сейчас находится на самом верху, поэтому при клике на лейбл получаемое значение выглядит случайным.

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

#css #trick

https://css-tricks.com/are-there-random-numbers-in-css/

Сегодня столкнулся с циклическими зависимостями в своём проекте. Захотелось посмотреть, как эту проблему решают другие. Нашёл статью Мишеля Вестстрате (автор mobx) — "How to fix nasty circular dependency issues once and for all in JavaScript & TypeScript".

Суть подхода заключается в использовании двух файлов internal.js и index.js. Файл internal.js реэкспортит все локальные модули. Файл index.js (входная точка в библиотеку) реэкспортит содержимое internal.js — export * from "./internal.js";. Локальные зависимости должны импортировать нужные сущности только из internal.js. В internal.js все реэкспорты размещаются в таком порядке, в котором все зависимости будут корректно разрешены. Благодаря такому подходу можно управлять порядком загрузки модулей.

В итоге пофиксил циклические зависимости по-другому, но взял на заметку подход Мишеля.

#js #esm #trick

https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de

Лия Веру написала небольшую статью про то как подружить между собой ESM и библиотеки, использующие другие подходы, — "Import non-ESM libraries in ES Modules, with client-side vanilla JS".

Все популярные браузеры поддерживают нативную модульную систему (ESM). Проблема в том, что есть очень много CommonJS-библиотек, которые были написаны давно и которые просто так нельзя взять и подключить к себе с помощью import. Для обхода этой проблемы Лия предлагает использовать небольшой трюк, суть которого заключается в использовании динамического импорта с предварительно застабленной переменной module:

async function require(path) {
 let _module = window.module;
 window.module = {};
 await import(path);
 let exports = module.exports;
 window.module = _module;
 return exports;
}

У такого подхода много ограничений, но он может пригодиться, если надо по-быстрому поэкспериментировать с библиотеками, которые распространяются как CommonJS/AMD-модули (для AMD надо стабить define).

#esm #trick #js

https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/

Не знаю как у вас, но меня постоянно вводили в ступор хинты производительности <link rel="prefetch"> и <link rel="preload">. Когда пытался вспомнить их назначение, в голове возникали примерно такие вопросы: "Prefetch отвечает за оптимизацию загрузки ресурсов для текущей страницы или следующих страниц? А за что тогда отвечает preload?"

Prefetch и preload похожи друг на друга: prefetch отвечает за оптимизацию загрузки ресурсов на страницах, которые будут открыты через некоторое время, preload — за оптимизацию загрузки ресурсов, которые нужны прямо сейчас на текущей странице.

Сегодня придумал мнемоническое правило, помогающее запомнить, что за что отвечает: preLoad помогает оптимизировать загрузку ресурсов на локальной (Local) странице (то есть текущей), preFetch помогает оптимизировать загрузку ресурсов на будущих (Future) страницах.

Preload — local, prefetch — future.

#performance #trick

https://twitter.com/myshov/status/1319652179263868928

Амит Шин рассказал о том, как получить позицию курсора мыши на чистом CSS — "How to Map Mouse Position in CSS".

Идея заключается в создании сетки элементов, в каждой ячейке которой задаются кастомные свойства с координатами:

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

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

#css #trick

https://css-tricks.com/how-to-map-mouse-position-in-css/