Всем привет!

Во первых, удивлен и одновременно рад результатам опроса выше.

Изначально не хотел включать atom и sublime, но потом подумал, вдруг тут окажутся фанаты. Но, видимо таковых уже и нет.

Собственно, возвращаясь к теме этого поста. Хотел бы поговорить про throttle и его вариацию, которая может быть очень полезна.

Это вариация - rafThrottle (raf - request animation frame). Вот простая имплементация.

const rafThrottle = fn => {
  let rafId = null;

  const throttledFn = (...args) => {
    if (typeof rafId === 'number') {
      return;
    }

    rafId = requestAnimationFrame(() => {
      fn.apply(null, args);
      rafId = null;
    });
  };

  throttledFn.cancel = () => {
    if (typeof rafId !== 'number') {
      return;
    }

    cancelAnimationFrame(rafId);
  };

  return throttledFn;
};

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

Для чего это нужно?

Данный функционал нужен тогда, когда у вас есть обработчики, обновляющие UI, которые могут быть вызваны большое кол-во раз в секунду (scroll, wheel, mousemove, touchmove и тд.).

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

Как уже и сказал, самое часто применение - это драг какого-то элемента, однако есть и много других ситуаций, где такой throttle бывает полезным.

Также, если у вас lodash в проекте, то при использовании throttle и debounce без 2-го аргумента, задержка будет вычислятся на основе requestAnimationFrame.

#devtips #js

Всем привет!

Как вы знаете, this в JavaScript далеко не из самых простых вещей для понимания.

Есть очень много разных кейсов — use strict, type=“moulde”, arrow/обычные функции, классы и тд.

Так вот, хотел бы поделиться с вами самым полноценным объяснением, что я встречал. И самое удивительное то, что написано оно в ответах на stack overflow.

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

https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work-and-when-should-it-be-used/3127440#3127440

#devtips #js

Сидел тут лазил в исходинках React (хотел уточнить один момент касательно батчинга), и наткнулся на такую вещь, как navigator.scheduling.isInputPending.

Решил загуглить, оказалась, что это АПИ которое позволяет узнать, есть ли какие-то ивенты от пользователя, ожидающие обработку.

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

Подробнее про саму эту фичу можно почитать вот тут — https://developer.chrome.com/articles/isinputpending/

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

UPD: кажется, что есть пропоусал на добавление в стандарты — https://github.com/WICG/is-input-pending

#devtips #js #react

Всем привет!

Некоторые из вас наверняка могли знать про то, что в консоли хрома есть такие функции, как $ (даже когда нету jQuery на сайте), $$ и getEventListeners.

Все эти функции я находил в основном экспериментальным путем. Наверное только getEventListeners я как-то увидел на просторах stack overflow.

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

Лично мне показались полезными monitor, monitorEvents, profile и profileEnd. Думаю найдете что-то полезное под свои use case'ы.

https://developer.chrome.com/docs/devtools/console/utilities/

#devtips #js #chrome

Всем привет!

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

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

https://web.dev/speed-v8/

#devtips #js #performance

Всем привет!

Что-то у меня не хватает времени на написание мини-статьи, хотя беклог с идеями продолжает расти.

Зато опять есть интересная ссылка про circular reference от создателя MobX. Часто когда провожу ревью проектов вижу, что люди не особо понимаю, что это такое и по какой причине происходит.

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

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

#devtips #js

Часто у меня в комментариях спрашивают мнение о Vite. Решил ответить сразу на всех.

Так вот, как вы можете понять из моих уроков, отношение у меня к нему позитивное.

Работает быстро, конфигурировать легко, плагинов обычно хватает. Да, есть приколы с VITE_, но в остальном все хорошо.

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

Недавно помогал человеку с уменьшением бандла на проекте (он перенес его с вебпака на вит), и наткнулись на разные проблемы.

В итоге все вроде решается, но порой приходится завязываться на странные плагины с 3-4к установок в неделю.

Тот же bundle analyser очень неудобный по сравнению с вебпак, хотя вроде всю инфу показывает и обойтись можно.

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

Но для дева точно стоит использовать, скорость сборки просто в сотни раз быстрее!

#devtips #js

Сегодня узнал интересный момент, касательно анимаций.

Наверное все слышали, что для триггера анимаций нужно использовать вложенные requestAnimationFrame или же производить forced reflow, чтобы браузер понял об изменении стилей.

Например, такой код не будет анимировать ничего:

function animate() {
  const div = document.querySelector("item");

  div.style.height = "0px";
  div.style.transition = "all 1s ease";

  div.style.height = "500px";
}

А такой:

function animate() {
  const div = document.querySelector("item");

  div.style.height = "0px";
  div.style.transition = "all 1s ease";

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      div.style.height = "500px";
    });
  });
}

Или такой:

function animate() {
  const div = document.querySelector("item");

  div.style.height = "0px";
  div.style.transition = "all 1s ease";

  div.getBoundingClientRect();

  div.style.height = "500px";
}

Будут.

Я всегда думал, что это правило применимо для всех свойств. Но кажется, что это относится только к тем, которые триггерят reflow.

Например, после запуска вот этого кода, у вас также сработает анимация.
```
function animate() {
const div = document.querySelector("item");

div.style.color = "red";
div.style.transition = "all 1s ease";

div.style.color = "white";
}
```
Выглядит так, что браузер просто пытается оптимизировать лишние reflow, поэтому не запускает анимации для свойств, которые на него воздействуют.

Опять же, это просто предположения, но хочется подробнее про это все узнать. Может кто-то знает, с чем это связано?

UPD: В комментах @senheleet подсказал, что с color работает все, так как у нас по дефолту всегда есть какое-то значение. А с height по дефолту значение auto и от него нельзя начать анимацию.

#devtips #js

Сегодня смотрел, что нового происходит в мире JS.

Самое интересное, что я нашел — это выход nest.js v10 и svelte v4.

По поводу nest много сказать не могу, так как я почти не писал на нем.

А вот улучшения по размеру конечного бандла от свелта не плохи, учитывая то, что и так output был у него значительно меньше того же реакт (но меня больше удивило уменьшение размера самого пакета в 4 раза).

Хотя, кажется это только меня и заботило)

Если есть что-то интересное — тоже делитесь в комментариях.

https://svelte.dev/blog/svelte-4
https://trilon.io/blog/nestjs-10-is-now-available

#devtips #js

Очень крутая статья от GitHub о том, как они пилили новый code view (фича кстати очень удобная, был сильно рад, когда выкатили).

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

Сам не раз сталкивался с подобной болью. Обычно решение было просто создать кастомный поиск. Но… сами понимаете, решение не из лучших.

А тут ребята на много дальше пошли, в общем, прочитаете сами)))

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

#devtips #js

Еще 3 новых proposal дошли до stage-3:

- https://github.com/tc39/proposal-source-phase-imports
- https://github.com/tc39/proposal-array-grouping
- https://github.com/tc39/proposal-promise-with-resolvers

Первое нововведение добавляет реально новый функционал. Правда кроме wasm пока не понял, где это может быть нужно. Но я думаю тут подскажут еще.

Что же касается Promise.withResolvers и array grouping — то кажется просто решили добавить пару утилит в сам язык) Мелочь, но может чуть упростить работу местами.

#devtips #js