#инструмент дня

Я, конечно, прошу прощения за неожиданную иллюстрацию к посту, но у меня примерно сейчас такие вот ощущения от либы, про которую хочу рассказать :)

И называется она, какая неожиданность, cigs.

Ну, буквально: 🚬 cigs

Сразу ссылка: https://github.com/cigs-tech/cigs

Итак, что же она делает.

А она позволяет задавать вопросы по заданной Zod-схеме обычным человеческим языком используя OpenAI-токены!

Короче, ещё более просто. Описываешь некую схему объекта, а потом спрашиваешь у системы: "А какой там любимый цвет у Джона?". И получишь ответ!

Пример:

function getUserCompliment(username: string) {
  const colorMap = {
    "Alice": "blue",
    "Bob": "green",
    "Charlie": "red",
  };
  return {
    color: colorMap[input.username as keyof typeof colorMap] || "unknown",
  };
}

const userInfoSchema = z.object({
  username: z.string(),
});

// Define a cig to get a user's favorite color
const getFavoriteColor = cig("getFavoriteColor", userInfoSchema)
  .handler(async (input) => {
    // Simulated database lookup
    return getUserCompliment(input.username);
  });

// Usage example
(async () => {
  try {
    const result = await getFavoriteColor.run(
      "What is the favorite color of Alice",
    ); // { color: 'blue' }
    console.log(result);

    const result2 = await getFavoriteColor.run(
      "What is the favorite color of Susan",
    ); // { color: 'unknown' }
    console.log(result2);

    // You can also call that function with the specified input
    const result3 = await getFavoriteColor.run({ username: "Alice" }); // { color: 'blue' }
    console.log(result3);
    // Expected output: { username: 'alice', favoriteColor: 'blue', compliment: 'You have great taste!' }
  } catch (error) {
    console.error("Error:", error);
  }
})();

Вы вообще понимаете, что это значит для тех, кто пишет парсеры или генераторы фейковых данных? :)

Вытащить все спец предложения с "красной ценой" со страницы интернет-магазина? Да запросто! Даже если этот самый магазин обфуцирует код.

Или использует Styled Components.

Пройдите на страницу библиотеки и почитайте примеры. Это нечто потрясающее.

#ai #parser

Неплохая статья о Vapor

#article #vapor

В чате vuejs_ru вчера прошла короткая дискуссия о вредности и ненужности :deep(). Типа его можно заменить на установление путем JS в 2 строчки класса на внутреннем компоненте.

Попросил привести пример в случае, если container query во внешнем компоненте меняет flex-direction во внутреннем - абсолютно реальный use-case.

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

:deep() - это инструмент, пользоваться им надо умело, и не будет никаких проблем. Если ты постоянно пытаешься, ограничивая инструментарий, сделать защиту от дурака, то ты этих дураков и плодишь.

CSS - это уровень представления вашего приложения, его функционал давно выходит за пределы только простенькой адаптивности, анимации и цветовых тем. В CSS тоже есть логика, и перекладывать её работу на JS нецелесообразно.

CSS всегда на порядки быстрей JS в браузерах. И поэтому использование JS вместо CSS как минимум очень сильно бьет по производительности, да еще и замусоривает скриптовую секцию вашего SFC.

Когда мне надо в проекте сделать свой небольшой UI kit, я обычно size=large в BaseButton передаю не пропсом, а CSS классом. Потому что эта штука принадлежит именно уровню представления - то есть, CSS. И потому что приложение так будет работать быстрее, а SFC получается проще, чище и понятней.

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

TS для разработчика, а не разработчик для TS.

#css

Еще одно интервью Эвана о Vue, Vite, VoidZero будущем JavaScript Tooling

#evanyou #video #interview

https://github.com/hsa00000/Urocissa

Галерейка на Вую

Немного про авторизацию в Наксте
https://soubiran.dev/posts/nuxt-going-full-stack-how-to-handle-authorization

https://dev.to/jacobandrewsky/using-cache-control-in-nuxt-to-improve-performance-565o

Про кеширование в Наксте

https://masteringnuxt.com/blog/controlling-when-components-are-loaded-in-nuxt?friend=MOKKAPPS

Контролируем загрузку компонентов в Наксте ребятушки

Ну вы гляньте на них, надонатили почти бакс 🤩 😅

Допустим видео, простихоспаде

Создаём сайт на Vue.js, Nuxt Studio, Nuxt Content, and Nuxt UI

https://www.youtube.com/watch?v=llnFaQqEM8E&ab_channel=ThisDotMedia

https://component-party.dev/

Компонентная вечеринка ребят

Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n

#заметка дня

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

Некто Бен Дикен (ну как, некто, его статью по B-деревьям и индексам в базах данных мы недавно читали) решил хайпануть на теме производительности разных языков и сред. Ну, на синтетических тестах, если уж совсем точно.

И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/

Ну, условно, вот такой код:

let array = new Array(10000);
for (let i = 0; i < 10000; i++) {
  for (let j = 0; j < 100000; j++) {
    array[i] = array[i] + j;
  }
}

Если коротко, то получилось, что JS в Node.js в 30 раз медленнее, чем C, скомпилированный в gcc с -O1 (минимальной оптимизацией).

Ох, как же его начали макать... Опустим очевидные моменты вроде тех, что никому в реальной жизни не интересно, как там миллиард циклов выполнится. Что гораздо интереснее — это как всё улучшить.

Как оказалось, улучшать есть что! На иллюстрации к посту вы видите результат коллективной работы большого числа людей. Как видим, JS лишь в 2-2.5 раза медленнее: https://benjdd.com/languages/

Как так вышло? Очень просто: know your tools.

Например, прям из простейшего: если в JS создать массив как new Array(10000), он будет заполнен мусором и готов будет принимать в себя любые типы элементов. А если new Array(10000).fill(0) — движок оптимизирует код под работу с целыми числами. И буст будет просто огромный.

Вот вам и динамический язык, кто бы мог подумать. Дальше — больше (new Int32Array(10000), например).

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

Особенно если вы собираетесь вложенные циклы миллиардами итераций выполнять.

#performance #test

А тут 6 версия релизнулась)
https://vite.dev/blog/announcing-vite6.html

The State of Vue.js Report 2025 - Developer Survey

https://docs.google.com/forms/d/e/1FAIpQLSc6QQQ14ZuE4akaTZAkqOAMUSGjXVjKS-KuVu2eZ448jzK1Nw/viewform