Для тех, кто также как и я каждый раз писал свой обработчик для state-менеджеров, чтобы данные также сохранялись в locale storage и впоследствии не пропадали после перезагрузки страницы: оказывается для этого существуют отдельные библиотеки 😄

Например, для effector это effector-storage, для pinia из vue это pinia-plugin-persistedstate, а для zustand это zustand-persist 💁‍♂️

Недавно попался очередной удобный сайт для подготовки к Frontend собеседованиям. Понравился тем, что в нём собрано всё вместе: теория и практика, алгоритмы и System Design, JavaScript и React.

Выложил статью о библиотеке localForage на habr. Полезная штука, когда размеров localStorage уже не хватает, а работать с нативным API IndexedDB не особо хочется.

Если ваш скрипт должен запускаться в разных средах, то, вероятно, вам будет полезен объект globalThis. Он предоставляет доступ к глобальному пространству имен в любом окружении. К примеру, в браузере это window, в Node.js это global, а в веб-воркерах это self. С введением globalThis в ECMAScript 2020 (ES11) уже не нужно писать проверку под каждую отдельную среду, т.к. везде он будет работать правильно:

globalThis === window
globalThis === global
globalThis === self

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

В последнее время в сети много шума по поводу DeepSeek - китайского ChatGPT. Попробовал его сам. Пока что на фронтендерские вопросы отвечает неплохо, но значительно слабее конкурента от OpenAI. Будем наблюдать за ним дальше.

Оказывается let и const работают аж на 10% медленнее var 🤦‍♂️😄
Относительно недавно разработчики V8 выпустили отчёт о нововведениях, им получилось сократить эту разницу до 6%.

https://docs.google.com/document/d/1klT7-tQpxtYbwhssRDKfUMEgm-NS3iUeMuApuRgZnAw/edit?tab=t.0
https://v8.dev/blog/holiday-season-2023

Но это всё равно слишком большая разница, особенно для крупных и сложных систем. Собственно, поэтому TypeScript уже переехал на var 👍

https://github.com/microsoft/TypeScript/pull/52833
https://github.com/microsoft/TypeScript/pull/52903

Ранее при работе с разными наборами стилей возникали проблемы переопределения. Кто-то использовал костыли ввиде !important, кто-то пытался добавить отдельным элементам больше специфичности при помощи дополнительных конструкций в селекторе (например: .container .wrapper .content .form .button.button-danger { ... }) и так далее. Все эти варианты были очень неудобными и чаще всего только усложняли стили для восприятия.

В CSS Cascading and Inheritance Level 5 в 2021 году появился альтернативный вариант для работы с переопределением стилей - директива @layer.

Она позволяет создавать слои с наборами стилей и определять их приоритет самостоятельно.
Например:

@layer reset, base, utilities;

@layer base {
  h1 {
    color: blue;
  }
}

@layer reset {
  h1 {
    color: red;
  }
}

@layer utilities {
  h1 {
    color: green;
  }
}

/* 
По итогу применится color: red, т.к. reset по порядку указан первым и благодаря этому имеет наивысший приоритет:

  h1 {
    color: red;
  }

*/

Порядок @layer reset, base, utilities; можно было бы вообще не указывать. Тогда чем бы ниже располагался слой, тем бы больше у него была специфичность. В таком случае color был бы равен green, т.к. utilities располагается ниже остальных.

Вот таким образом можно определять порядок импортируемых стилей:

@import url("reset.css") layer(reset);
@import url("base.css") layer(base);
@import url("utilities.css") layer(utilities);

Этот синтаксис очень удобен при переопределении стилей библиотек:

@import url("tailwind.css") layer(tailwind);

@layer my-styles {
  .button {
    background: green;
    color: white;
  }
}