#meme #rolldown #humor

Создатель React Jordan Walke назвал вью-шников психически больными людьми

Кстати, у Эвана в X подписчиков в 5 раз больше, чем у него.

#react #vuejs

Качественная структурированная подборка идей для пет и тренировочных проектов

С примерами реализации

#learning

Качественное кино.

И инструкция, как правильно делать бёрпи.

ОЧЕНЬ полезно при сидячем образе жизни для профилактики проблем со спиной.

#offtop #video

"Frontend", "Front-End" or "Front End"?

Исследование

#frontend

Уже писали год назад об этом каталоге UI библиотек

https://ui-libs.vercel.app/

С тех пор там немного прибавилось библиотек и функционала

#ui #lib

Сегодня зашла в гости вторая скрипка региональной государственной филармонии с мужем

Сыграли "Зиму" Вивальди

С Рождеством

#music #offtop

У Cursor AI в Composer на прошлой неделе (вроде) появилась сильная фича - теперь когда он делает инкрементные изменения в коде, то после каждого шага проверяет ошибки линтинга и исправляет их перед тем, как приступить к следующему действию.

Это помогает не уйти в полные дебри при генерации.

#ai #cursor

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

Например, для создания CSS анимаций или флексбокс генератор

#tool #css

Сравнение производительности систем реактивности Vue 2 и Vue 3

https://stackblitz.com/edit/sb1-ftgjrkge?file=performance.js

Напряг нейронку на примитивные тесты

┌─────────────────────────┬────────────────┬────────────┬───────────┬────────────┐
│ Test Case               │ Operation      │      Vue 2 │     Vue 3 │ Difference │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Creation       │   282.35ms │  282.63ms │       0.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Updates        │    15.22ms │   43.31ms │     184.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Creation       │  1851.82ms │  457.59ms │     -75.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Updates        │     2.34ms │   19.17ms │     720.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Creation       │  6744.25ms │ 1808.13ms │     -73.2% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Updates        │     1.84ms │   25.53ms │    1283.5% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Creation       │   627.95ms │  371.53ms │     -40.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Updates        │   145.56ms │  155.88ms │       7.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Assignment     │   192.23ms │   60.92ms │     -68.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Creation       │ 12068.51ms │ 2931.10ms │     -75.7% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Updates        │     1.93ms │   20.38ms │     958.4% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Deep Update    │     7.17ms │   63.64ms │     788.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Creation       │  3473.25ms │ 1089.35ms │     -68.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Updates        │     1.93ms │   26.83ms │    1294.0% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Creation       │   810.08ms │  422.19ms │     -47.9% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Updates        │     1.98ms │   19.96ms │     908.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Complex Update │   196.00ms │   78.74ms │     -59.8% │

AbortController можно применять не только для отмены сетевого запроса, но и для отмены, практически, любых событий, включая setTimeout, анимацию или нажатие на кнопку

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// Component A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">hello</p>
</template>

Функции во Vue ведут себя не совсем как функции

В данном примере функция isAuthenticated() ведет себя как computed и будет вызываться каждый раз, когда user изменится или компонент А будет перерисовываться.

Происходит это из-за того, что Vue определяет все реактивные зависимости внутри тела функции и перерендивает компонент, когда кто-то из них меняется.

Таким образом, большой разницы в использовании функции вместо computed нет. Но если внутри большая логика, то лучше использовать computed, потому что он будет пересчитываться только когда его зависимости изменились, а функция - при любом рендеринге

#reactivity #tip #optimization

Лучше жить в деревне с утками,
Чем в столице - с проститутками (с)

#offtop #video

Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

В альфа версии, но кода много

#ui #lib

Что-то захотелось редактируемый профиль пользователя на странице сделать через html contenteditable

Потратил кучу времени, что-то получилось, но в итоге переделал на input

Очень неудобно, особенно с системой байндинга и реактивности Vue
Не делайте так.

#html