Пару слов об эффективности и качестве некоторых очень популярных библиотек и кода на их основе.

Tanstack - собрание универсальных пакетов и утилит, Суммарно более 70K GitHub звезд, 1000+ контрибьютеров.

Пакет vurtual, 4.8K звезд, предназначен для реализации бесконечного скрола

Файл examples/vue/infinite-scroll/src/App.vue, строка 108

Получение последнего элемента массива virtualRows:

watchEffect(() => {
  const [lastItem] = [...virtualRows.value].reverse()

  if (!lastItem) {
    return
  }
  // ...
});

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

#performance #tanstack

Общеполезная информация об интернет технологиях
Уровень: medium

#learning #video

Статья, описывающая как работает Hot Module Replacement в Vite

#vite #hmr

Библиотека Google Translate предоставлял веб-разработчикам JavaScript SDK для установка переключателя языков и перевода своего сайта "на лету" с одного языка на другой. Качество было хуже кастомного перевода, но позволяло быстро сделать хоть какую-то поддержку нескольких языков на сайте. Четыре года назад Google от поддержки этой своей библиотеки отказался.

Тем не менее, остались пакеты, которые позволяют это делать через Google Translate API. Один из них с поддержкой Vue - google-translate-select.

#tip #google #i18n

Vite 6 собираются выпустить в этом году.

Rolldown как замена esbuild может быть готов для экспериментального использования, но планируется всё же на седьмую версию сборщика.

На GitHub открыта дискуссия для жалоб и предложений касательно функционала Vite 6.

#vite

Существует ли четырехугольник, который можно разрезать двумя прямыми на 6 кусков?

#math

Vue.js релизнула v3.4.19

Опять не очень удачно - были добавлены предупреждения пользователям, если computed имеет side effect-ы, однако в соответствующем PR-e сразу посыпались жалобы, что из предупреждения не видно, в каком computed-e проблемы, и даже что чистые computed-ы дают такие предупреждения.

#vue

Принцип инверсии зависимостей

Буква D в аббревиатуре принципов объектно-ориентированного программирования SOLID означает Dependency inversion principle - Принцип инверсии зависимостей, который очень хорошо применим и во фронтенд разработке.

Он гласит: "Завись от абстракций. Не завись от конкретной реализации".

Другими словами, если у вас есть некая сущность, которая что-то использует, то возможно она должна это делать через интерфейс.

Пример: в ваших компонентах вам надо форматировать дату и время. Вы можете сразу подключить какой-нибудь dayjs и использовать его везде. В какой-то момент вы обнаруживаете, что функционала dayjs не хватает, и подключаете date-fns, попутно меняя весь предыдущий код.

Согласно Принципу инверсии зависимостей вам следует создать интерфейс для функций работы с датой - например, dates.ts, в котором прописать свои функции, которые являются обертками над date-fns функциями. В коде вы обращаетесь к этим своим функциям, а их реализация уже лежит в этом файле. Это даёт ту самую loose coupling - слабую связанность.

В ООП языках между конкретной реализацией dates.ts и кода, её использующего, нужно бы было создать промежуточный абстрактный класс DateUtilities - именно его называют в объяснении принципа "абстракцией". В JavaScript он не создается, dates.ts выполняет и его роль.

Таким образом вы можете спокойно работать над проектом с самого начала, не задумываясь, кто именно будет реализовывать логику работы с датами. Вполне возможно, к концу проекта вы увидите, что используете только 3 функции из date-fns, и они вполне могут быть реализованы самостоятельно. Вы избавляетесь от зависимости, делаете бандл легче, приложение - быстрее, и не надо ничего менять в коде, кроме самого dates.ts. Возможно будет иная причина поменять одну зависимость на другую - вы снова это делаете, не меняя основного кода.

То же самое относится к компонентам - обертки BaseButton, BaseIcon, BaseDropdown и т.п. служат этой же цели - значительно облегчить разработку, поддержку и дальнейшее развитие проекта путем снижения привязанности основного кода к конкретным зависимостям.

#architecture #solid

Забавный твит

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

#ssr #nuxt

Сайт, который показывает что может современный PWA на мобильных устройствах.

whatpwacando.today

#pwa

FormKit выпустила библиотеку `tempo`, для работы с датой и временем

Tempo - это новая библиотека в ряду библиотек работы с датой и временем JavaScript. Вдохновленная такими библиотеками, как moment.js, day.js и date-fns, Tempo создана с нуля, чтобы быть как можно более маленькой и простой в использовании.

Tempo лучше всего рассматривать как набор утилит для работы с объектами Date - важное отличие от других библиотек, предоставляющих пользовательские примитивы даты. Под капотом Tempo использует JavaScript's Intl.DateTimeFormat для извлечения сложных данных, таких как смещение часовых поясов и форматы дат с учетом локали, предоставляя вам простой API для форматирования, разбора и манипулирования датами.

В коде под капотом действительно все чистенько и tree-shakable.
Но, повторюсь, если вам нужно немного каких-то особенных функции для работы с датами, например, addHour(), попросите Codeium или другой чат-бот сгенерировать их и, возможно, этого вкупе с Intl.DateTimeFormat вполне хватит

#formkit #tempo #dates