При написании своей реализации useLocalStorage для Arty-Crafty родились небольшие размышления о библиотеке VueUse

#vueuse #artycrafty

Интересная статья, как интегрировать ChatGPT через GitHub Actions для code review пулл-реквестов.

При этом используется ProxyAPI - проксирующий сервис для RF зоны для доступа к OpenAI без VPN и с оплатой в национальной валюте.

#ai #github

В деревне вдоль дороги стоит четыре дома. Расстояния между ними указаны на рисунке. В деревне решили сделать колодец.

Где его расположить, чтобы сумма расстояний от него до домов была как можно меньше?

#math

Вчера случилась очень странная вещь.

У меня есть студент колледжа, которому я иногда помогаю. Вчера он попросил пройти с ним задание колледжа. Язык - C, тема - работа с памятью, массивы, структуры. В задании дан task.h файл с описанием используемых структур и функций с именами, говорящими сами за себя, которые и надо реализовать в соответствующем task.c файле.

Открыл он task.c в VS Code, после объявления первой функции набрал открывающую скобочку и нажал enter. Codeium написал первую строку, - раньше мы занимались JavaScript, и я ему посоветовал его поставить. Правильно. Он нажимает tab, снова enter, - опять правильно. Короче, 95% кода он протаббил, причем, самый сложный код (работа с памятью). Немного сам поменял логику где надо только.

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

Минуты две мы это переваривали на уровне: "Он нас слышит". Потом я вспомнил, что этот же тест давался в колледже и год назад, а может и ранее, и, скорей всего, информация о нем есть в интернете, хотя прямых упоминаний я ненагуглил. Так что, и слышит, и видит, и знает.

Короче, чувства от всего этого очень противоречивые.

Имеется 68 монет, причём известно, что любые две монеты различаются по весу.
За 100 взвешиваний на двухчашечных весах без гирь нужно найти самую тяжелую и самую лёгкую монеты.

#math

#illustration #cookie

У каких фреймворков есть реактивный state management из коробки.

Внутри компонента, и за пределами компонентов.

#illustration #benchmark #state #react #solidjs #svelte #angular

Моя крайняя критика VueUse была довольно болезненно принята в рунете, и очень агрессивно на Reddit-e, что удивительно - обычно всё наоборот в силу различий в уровнях толерантности. Ощутил себя нечто средним между Гринчем и г-ном Карловским. В связи с чем вспомнилась история.

Много лет назад сидел в горах на нестабильном мобильном EDGE интернете со средней скоростью 3-4Кб/с, хотя бывало и по 0.5Кб/с. Чтобы как-то выжить, написал расширение к браузеру MainPage, даже набравшее свою небольшую популярность в Google Web Store, которое блокировало загрузку любых ресурсов, кроме страницы, на которую обратились.

Потом сделал локальный вебсайт, соответственно, его пользователи примерно на таком же интернете. Начал оптимизировать и дошел до того, что кэшировал статику - css, js, - в localStorage. Получилось очень эффективно. Эра сервис воркеров тогда только занималась.

Ну, вылез на Хабр и написал про это статью. Тут на меня полилось в комментариях - да ты не умеешь Apache настраивать, надо кэширующими заголовками, выкинь свои самоделки, да не будет там пустых запросов, да ты вообще не знаешь как Интернет работает...

Дня через 3-4, когда меня почти убедили, что я дурак, выходит явно не маленький дядька из Яндекса, и говорит: да нормальный метод, мы сами так много лет делали. И начинает рассказывать в подробных технических деталях, как они пробовали разные способы оптимизации трафика, что они давали, и почему выбрали этот. И это про свою главную поисковую страницу, которая ya.ru одной строкой, не про сервис какой-то. А Яндекс в то время ещё был авторитет.

Мораль сей басни такова: можно послушать мнение толпы, но прислушиваться к нему не обязательно. Особенно, если чувствуешь, что прав.

#story #vueuse

Замените буквы разными ненулевыми цифрами, чтобы получилось верное равенство

#math

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

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