Большое интервью Эвана Ю о Voidzero

Есть субтитры на русском

#evanyou #voidzero

#vue #критика

Автор: @Indy660
Ссылка: https://github.com/Indy660/player_with_my_favorite_music
GH Pages: https://indy660.github.io/player_with_my_favorite_music/#tab=all&track=0

Гитхаб
https://github.com/GitM4n/rick-and-mory-v2/tree/master


Сайт
https://rick-morty-v2.netlify.app/

#vue #критика

Автор: @sultondev
Ссылка: https://www.npmjs.com/package/vue-hover-effect
Ссылка на борду: https://volta.net/sultondev/vue-hover-effect

#vue #критика

Автор: @Gitm4n
Ссылка: https://github.com/GitM4n/rick-and-mory-v2/tree/master
Сайт: https://rick-morty-v2.netlify.app/

#vue #критика
Продолжаем обозревать ваши проекты, на очереди у нас целое радио)

Автор: @AlAstroMoody
Код: https://github.com/AlAstroMoody/radio
Приложение: https://alastromoody.github.io/radio/

#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-histogram-dual-range
Github: https://github.com/CodeXiD/vue-histogram-dual-range#readme

#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-swipe-sheet
Github: https://github.com/CodeXiD/vue-swipe-sheet

#vue #критика

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

Автор: @z1kYz3r
Web: https://time2money.zq.lt
Chrome extension:
https://chromewebstore.google.com/detail/time-to-money-calculator/hmlelnagnhidpaifchocofnbikmpipmb
Github: https://github.com/zikju/time-to-money-calculator

#vue #критика

UI для мультиплеерного мода M&B:Bannerlord
Без адаптива (не нужен)
Авторизация через Steam/Xbox/Epic (чтобы увидеть все разделы)
Много unit-тестов

Автор: @zohan333

Web: https://c-rpg.eu/

https://c-rpg.eu/strategus/ - WIP режим глобальной карты

GitHub: https://github.com/namidaka/crpg

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

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

И называется она, какая неожиданность, 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